Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 759
user3212350 Avatar asked Nov 11 '16 14:11

user3212350


People also ask

How do I redirect to another page in Vue?

Plain Vue. To send the user to an external page, you just have to put in a different URL: window. location.

How do I use Vue routing?

Step 1: Vue Router can be installed through Npm with the package named vue-router using below command. It can be used via a script tag as shown below. Step 2: Create our Vue project using the following command. Step 3: After creating our project we will add our Vue router using the following command.

How do you use a router to push?

Note: Inside of a Vue instance, you have access to the router instance as $router . You can therefore call this.$router.push . To navigate to a different URL, use router.push . This method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.


2 Answers

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' }
}];
like image 169
Aletheios Avatar answered Sep 27 '22 18:09

Aletheios


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>
like image 20
damienix Avatar answered Sep 27 '22 17:09

damienix