Currently, I am diving into the world of vue.js and encountering difficulties with setting up routing. My goal is to utilize templates stored in separate HTML files, rather than inline templates.
The issue I'm facing is that the routing does not seem to be functioning properly on my page, and no errors are being displayed. I am at a loss on how to resolve this. Can anyone provide some guidance?
Here is a snippet from my index.html
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="assets/js/vue.js"></script>
<script src="assets/js/vue-router.js"></script>
<script src="js/routes.js"></script>
</head>
<body>
<div id="app">
<router-link to="/home">Go to home</router-link>
<router-link to="/about">Go to about</router-link>
<router-view></router-view>
</div>
<script src="js/app.js"></script>
</body>
</html>
Here's a glimpse of routes.js
var routes = [
{
path: '/home',
template: 'pages/home.html'
},
{
path: '/about',
template: 'pages/about.html'
}
];
Lastly, here is my app.js
const router = new VueRouter({
routes // short for routes: routes
});
const app = new Vue({
el: '#app',
router: router
});
I have omitted the content of my home.html and about.html files as they contain only plain text.
Could someone please provide advice on how to resolve this issue? Additionally, it is crucial to note that I am unable to use imports, requires, or any node/babel-related tools, as this is solely a static webpage.