Vue.js routing to pages not working

Question

I'm trying to learn vue.js and I have a problem with making routing work. I want to use templates, which are inside other html files, so no inline templates.

What happens is routing is never pinned to my page and I receive no error. I have no clue how to make this work, can you help?

This is 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>

This is routes.js

var routes = [
{
    path: '/home',
    template: 'pages/home.html'
},
{
    path: '/about',
    template: 'pages/about.html'
}
];

and this is my app.js

const router = new VueRouter({
    routes // short for routes: routes
});

const app = new Vue({
    el: '#app',
    router: router
});

I won't be pasting my home.html and about.html because they're just one paragraph without anything.

How can I make this work? And what is extremely important I cannot use imports, requires, anything node/babel and stuff, this is a static page.

Are the pages you are linking actually vue templates or are you just in need of the router? — retrograde
– retrograde, Commented Nov 11, 2016 at 18:53

Aletheios · Accepted Answer · 2016-11-11 23:44:10Z

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' }
}];

damienix · Accepted Answer · 2016-11-11 23:54:38Z

There are 2 problems with your code

You used incorrect syntax - you need to wrap template tag inside component in the routes config
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>

Collectives™ on Stack Overflow

Vue.js routing to pages not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related