Attempting to develop a Vue SPA app, but encountering an issue with the routes not matching what was defined in the router. Despite all configurations seemingly correct, there is confusion as to why this discrepancy exists. What element might be overlooked here?
The index.html file looks like this:
<html>
<head>
<title>Creating New Vue.js Project</title>
<script src="assets/js/vue.js"></script>
<script src="assets/js/vue-router.js"></script>
</head>
<body>
<div id="app">
{{ 'Route: ' + JSON.stringify($route) }}
<v-app>
<router-view></router-view>
</v-app>
</div>
<script type="module" src="app.js"></script>
</body>
</html>
Here is my app.js code:
import routes from './routes.js'
new Vue({
el: '#app',
router: routes,
data: {
msg: 'Hello World!',
},
})
And my routes.js file:
import Index from './views/Index.js'
Vue.use(VueRouter)
export default new VueRouter({
mode: 'history',
routes: [
{
name: 'index',
path: '/',
component: Index,
},
],
})
When accessing http://localhost/new-vue-project/ and printing {{ $route }}, the following output is received:
{
"name":null,
"path":"/new-vue-project/",
"fullPath":"/new-vue-project/",
"matched": [
]
}
An attempt was made by adding a base property to the router but encountered the same outcomes.
base: 'http://localhost/new-vue-project/',