CODEWITHSUNDEEP
javascriptvue.jsvue-router
user3212350
user3212350

Reputation: 401

Vue.js routing to pages not working

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.

Upvotes: 10

Views: 24278

Answers (2)

damienix
damienix

Reputation: 6763

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>

Upvotes: 1

Aletheios
Aletheios

Reputation: 4020

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

Upvotes: 1

Related Questions