Vue.js routing to pages not working

As far as I know, you can't reference HTML files in the route configuration, the router won't load these files for you. Instead, you need to specify a component for each route which can bring its own template (have a look at the vue-router documentation):

var routes = [{    path: '/home',    component: { template: '<div>home</div>' }}, {    path: '/about',    component: { template: '<div>about</div>' }}];

If you don't want to put the HTML templates directly into your JS code, you can include them as follows:

index.html:

<script type="x-template" id="home">    <div>home</div></script><script type="x-template" id="about">    <div>about</div></script><script src="js/app.js"></script>

routes.js:

var routes = [{    path: '/home',    component: { template: '#home' }}, {    path: '/about',    component: { template: '#about' }}];

There are 2 problems with your code

1. You used incorrect syntax - you need to wrap template tag inside component in the routes config
2. You cannot include html files in the way you did it. Vue.js will not load them automagically.

Check out this:

const routes = [{    path: '/home',    component: {        template: "<div>home</div>"    }},{    path: '/about',    component: {        template: "<div>about</div>"    }}];const router = new VueRouter({routes});const app = new Vue({    el: '#app',    router: router})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script><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>