VueJS 2 vue-router 2（laravel 5.3）

Question

I am trying to link between (VueJS 2) components using (vue-router 2) router-link. When a link is clicked, the URL is not updated used in blade (laravel 5.3) i used router-link and already v-link is replaced so can i get any example to use vue-router in blade (laravel 5.3 last version)

console error : router is undefined

app.js

window._ = require('lodash');
    window.$ = window.jQuery = require('jquery');
    require('bootstrap-sass');
    window.Vue = require('vue');
    window.VueRouter = require('vue-router');
    require('vue-resource');
    Vue.use(VueRouter);
    var App = Vue.extend({});
    var router = new VueRouter({
        routes: [
            { path: '/AddServices', component: require('./components/Test.vue') }
        ]
    });
    new Vue({
            el: '#appp',
            router: router,
            render: h => h('router-view')
    });

    Vue.http.interceptors.push((request, next) => {
        request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

        next();
    });

balde have link app.blade.php

<router-link to="/AddServices">/AddServices</router-link>
<router-link to="/AddServices"><a>/AddServices</a></router-link>

blade have id to make action home.blade.php

<div class="container">
    <div class="row" id="appp">
            <router-view></router-view>
        </div>
    </div>

Answer 1

First thing first, you don't need to create new router instance

var router = new VueRouter({
...

and have the

Vue.use(VueRouter) // you can remove that one

Second, how do you expect the url to change if you have only 1 url ?

Try this router

var router = new VueRouter({
    routes: [
        { path: '/', component: require('./components/Example.vue') },
        { path: '/AddServices', component: require('./components/Test.vue') }
    ]
});

And here are links (and don't put <a> tags inside <router-link>

<router-link to="/">/index</router-link>
<router-link to="/AddServices">/AddServices</router-link>