Vue Router paths to pages not linking up

I am starting out with vue router today, and have what I thought was the basics in place, but when I see my project in the browser when i click for example ‘about’ all I get is a ‘Your file couldn’t be accessed’ so my paths to pages and links and the url arent linking up.

When I publish this is the url that I see first - file:///C:/Users/CardiffMet_Projects/front-end-dev-for-staff-profile/index.html

So then when I click About nothing renders and also the content for index doesnt appear either.

<!DOCTYPE html>
<html>
<head>
<title>Home - Lee Project</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
</head>
<body>

<div id="app" class="container" style="margin-top: 50px;">

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
		<li> <router-link class="nav-link" to=""> Home </router-link> </li>
		<li> <router-link class="nav-link" to="about"> About </router-link> </li>
		<li> <router-link class="nav-link" to="contact"> Contact </router-link> </li>
    </ul>
  </div>
</nav>

<div class="text-center" style="margin-top: 20px;">
	<router-view></router-view>
</div>
</div>

<!-- Vue Pages -->
<script src="pages/home.vue.js"></script>
<script src="pages/about.vue.js"></script>
<script src="pages/contact.vue.js"></script>

<!-- Vue Instance and Routes -->
<script>
var routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
];

var router = new VueRouter({
 routes: routes,
mode: 'history',
base: '/'
});

var app = new Vue({
el: '#app',
router: router
})
</script>
</body>
</html>

I have created the ‘pages’ folder and my files inside there are:
about.vue.js ; contact.vue.js ; home.vue.js

This for example is what home and about currently look like, but neither of these renders in the view.

var Home = {
template: "<div><h1>Home</h1><p>This is home page</p></div>"
};

var About = { 
template: "<div><h1>About</h1><p>This is about page</p></div>"
};

Hi,

The problem is that you are trying to access these files via the file system.

If you look in your browser’s console (open it using F12 and ensure the Console tab is selected), you’ll see an error along the lines of:

Security Error: Content at file:///path/to/index.html may not load data from file:///path/to/about.

The way to get around this is to use a development server.

Something like http-server works pretty well (note that you’ll need Node.js installed to run it).

If you start that up in the directory where you have index.html, then go to http://localhost:8080, everything should work as expected.

As an aside, if you are thinking of building anything more than a demo page with Vue and the Vue router, I would recommend either the Vue CLI, or Vite as the best way of setting up a dev environment. Both of these offer a dev server (with hot reloading).