Vue.component('l-link', {
    template: `
        <a v-bind:href="url" v-on:click="go"><slot></slot></a>
    `,
    props: {
        url: {
            type:String,
            required: true
        }
    },
    methods: {
        go: function (event) {
            event.preventDefault();
            var stateObj = { foo: "bar" };
            history.pushState(stateObj, "page 2", this.url);
            this.$root.currentRoute = this.url;
        }
    }
});

const NotFound = { template: '<p>Страница не найдена</p>' }
const Home = { template: '<l-link url="/vsvue/about">About</l-link><p>главная</p>' }
const About = { template: '<l-link url="/vsvue/">Home</l-link><p>о нас</p>' }

const routes = {
    '/vsvue/': Home,
    '/vsvue/about': About
}

new Vue({
    el: '#app',
    data: {
        currentRoute: window.location.pathname
    },
    computed: {
        ViewComponent () {
            return routes[this.currentRoute] || NotFound
        }
    },
    render (h) { return h(this.ViewComponent) }
});