How to integrate Vue router with Vue

Question

I found a great example of how to use Vue router. Here is the app.js file:

// Telling Vue to use the router
Vue.use(VueRouter)

// Initializing the router with options
var router = new VueRouter({
    history: false
});

// Redirect certain routes to other routes
router.redirect({
    '/': '/users/list'
})

// Define your routes here.  
// NOTE: You'd normally do something
// like require('./home/index.vue') for the component
router.map({
    // Not found handler
    '*': {
        component: {
            template:
            '<div>' +
            '<h1>Not Found</h1>' +
            '</div>'
        }
    },
    '/users': {
        component: {
            template:
            '<div>' + // Wrap your views in one root html node so that the transitions work
            '<h1>Users</h1>' +
            '<ul class="nav nav-tabs">' +
            '<li><a v-link="/users/list">List</a></li>' +
            '<li><a v-link="/users/create">Create</a></li>' +
            '</ul>' +
            '<br>' +
                // <router-view></router-view> is where the nested sub route views will appear.
                // If you want the transitions to happen here you can copy the attributes on the router-view in codepen's HTML view and paste it here.
            '<router-view></router-view>' +
            '</div>'
        },
        subRoutes: {
            '/list': {
                component: {
                    template:
                    '<div>' +
                    '<ul><li><a v-link="/users/1/profile">Rick James</a></li></ul>' +
                    '</div>'
                }
            },
            '/create': {
                component: {
                    template:
                    '<form>' +
                    '<div class="form-group">' +
                    '<input class="form-control" type="text">' +
                    '</div>' +
                    '<button class="btn btn-primary">Create</button>' +
                    '</form>'
                }
            },
            '/:id': {
                component: {
                    template:
                    '<div>' +
                    '<h1>User Settings</h1>' +
                    '<ul class="nav nav-tabs">' +
                    '<li><a v-link="/users/{{route.params.id}}/profile">Profile</a></li>' +
                    '<li><a v-link="/users/{{route.params.id}}/posts">Posts</a></li>' +
                    '</ul>' +
                    '<br>' +
                    '<router-view></router-view>' +
                    '</div>'
                },
                subRoutes: {
                    '/profile': {
                        component: {
                            template: '<div>Name: Rick James<br>Email: rick@james.com</div>'
                        }
                    },
                    '/posts': {
                        component: {
                            template: '<div><ul><li>Post Name 1</li><li>Post Name 2</li></ul></div>'
                        }
                    }
                }
            }
        }
    },
    '/different': {
        component: {
            template: '<div>' +
            '<h1>Different</h1><p>{{ test }}</p>' +
            '</div>',
            data: function() {
                return {
                    test: 'Hello I am a data variable from Vue.JS'
                }
            }
        }
    },
    '/about': {
        component: {
            template:
            '<div>' +
            '<h1>About</h1>' +
            '<p>' +
            'Well my father was a gambler down in Georgia,<br>' +
            'He wound up on the wrong end of a gun.<br>' +
            'And I was born in the back seat of a Greyhound bus<br>' +
            'Rollin\' down highway 41.<br><br>' +
            'Lord, I was born a ramblin\' man,<br>' +
            'Tryin\' to make a livin\' and doin\' the best I can.<br>' +
            'And when it\'s time for leavin\',<br>' +
            'I hope you\'ll understand,<br>' +
            'That I was born a ramblin\' man.' +
            '</p>' +
            '</div>'
        }
    }
});

// Declaring the app itself

var App = Vue.extend();

// Initializing the whole thing together
router.start(App, '#app')

But I don't know where to put the rest of the code. For instance, you need to initialize Vue, don't you? Where do you put your methods, your calls to Vue resource, etc. I tried adding this:

var app = new Vue({
    el : '#app',
    methods: {
        alertTest : function() {
            alert('hello');
        }
    }
})

But I don't know how to integrate. For the alertTest, I have a v-on event on one of my links. Here is the link:

 <a class="list-group-item" v-link="/users/list" v-on="click: alertTest">Users</a> 

But the event doesn't fire. I feel like I need to tie the first block of code (from a tutorial by Michael J. Calkins) into the second block of code so the event will fire. How do I do that? I don't know where to put the rest of the app, beyond the router.

Answer 1

This is a easy example for you http://vue.tigerb.cn/

which use

"animate.css": "^3.5.2",
"fastclick": "^1.0.6",
"fetch": "^1.0.1",
"font-awesome": "^4.7.0",
"ratchet-npm": "^2.0.4",
"vue": "^2.0.0",
"vue-infinite-scroll": "^2.0.0",
"vue-progressbar": "^0.7.0",
"vue-router": "^2.0.0",
"vuex": "^2.0.0",
"whatwg-fetch": "^2.0.1"

Answer 2

Probably this is too late to answer. I also took up Vue.js recently and had the same doubt. All through the Vue.js documentation the Vue instance is created using new Vue() and when i started learning the vue-router this all changed.

Note that when we use the Vue along with the Vue-router, there are a few API changes that we have to consider.

The simple work flow is :

• Create all your components like below:

  var home=Vue.extend({template:"<div align='center'>Homepage</div>"}); var about=Vue.extend({template:"<div align='center'>About</div>"}); var contact=Vue.extend({template:"<div align='center'>Contact</div>"});

• Create your app : [note the api change here.We do not do new Vue() anymore] var App = Vue.extend({});
• Create and reister your router like : var router = new VueRouter();
• Register your routes : router.map({ "/" : {component : home}, "/home" : {component : home}, "/about" : {component : about}, "/contact" : {component : contact}
})
• initialize your app: router.start(App, '#app'); Please note this step. Here we initialize and start the app. Instead of regular Vue api where we need to register the element declared in app like new Vue(el:"#app), see how the api has changed and now we register element (#app) with vue with above syntax.

Another thing to note is. The other Vue options [like data, computed,ready etc] can still be provided like below :

var App = Vue.extend({
data : function(){
    return {
        message : "hello"
    }
}

});

Note-1 Remember to call these routes from your page like <a v-link={path:'/home'}.

Note-2 Remember to place all v-links inside the scope of your #app in the html else your links would not be click-able.

For someone like me who is new to javascript world, just sticking to the conventions provided in the working examples works for me.

Answer 3

I'm not sure but this just works fine ( Use Vue.extend({}); instead of new Vue({}); ) :

var App = Vue.extend({
    methods: {
        alertTest : function() {
            alert('hello');
        }
    }
});
router.start(App, '#app')