vue-router 2 example

Example for vue-router 2

by Sergio Crisostomo

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <router-link to="/">/home</router-link>
    <router-link to="/foo">/foo</router-link>
    <router-view></router-view>
</div>

CSS

.page {
    padding: 10px;
}

JavaScript

const Home = {
    template: '<div class="page">Home</div>'
}
const Foo = {
    template: '<div class="page">{{title}}</div>',
    data() {
        return {
            title: 'Foo'
        }
    },
    methods: {
        reverTitulo() {
            setTimeout(() => this.title = 'Bar!!', 500);
        },
    },
    beforeRouteEnter(to, from, next) {
        next(vm => vm.reverTitulo())
    }
};
const router = new VueRouter({
    mode: 'history',
    routes: [{
        path: '/',
        component: Home
    }, {
        path: '/foo',
        component: Foo
    }]
})

new Vue({
    router,
    el: '#app',
    data: {
        msg: 'Hello World'
    }
})