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>
    <foo-clicker to="/foo">/foo</foo-clicker>
    <router-view></router-view>
</div>

CSS

.page {
    padding: 10px;
}

JavaScript

const Home = {
    template: '<div class="page">Home</div>'
}
const FooClick = {
    template: `
		<div @click="handleRouteClick">
          <router-link :to="to" :tag="tag"><slot></slot></router-link>
        </div>
	`,
    props: {
        to: {
            type: String,
            required: true
        },
        tag: {
            type: String,
            required: false,
            default: 'a'
        }
    },
    methods: {
        handleRouteClick() {
            const instance = this.$route.matched.find(r => r.path == '/foo').instances.default;
            instance.reverTitulo();
        }
    }
}
const Foo = {
    template: '<div class="page">{{title}}</div>',
    data() {
        return {
            title: 'Foo'
        }
    },
    methods: {
        reverTitulo() {
            console.log('???')
            setTimeout(() => this.title += '!', 10);
        },
    }
};
const router = new VueRouter({
    mode: 'history',
    routes: [{
        path: '/',
        component: Home
    }, {
        path: '/foo',
        component: Foo
    }]
})

new Vue({
    router,
    el: '#app',
    data: {
        msg: 'Hello World'
    },
    components:  {
        'foo-clicker': FooClick
    }
})