VueJS 2 vue-router 2 (laravel 5.3)

Question

我正在尝试使用 (vue-router 2) router-link 在 (VueJS 2) 组件之间进行链接。单击链接时，刀片（laravel 5.3）中使用的 URL 未更新，我使用了 router-link 并且已经替换了 v-link，所以我可以获得任何示例以在刀片中使用 vue-router（laravel 5.3 最新版本）

控制台错误：路由器未定义

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 有链接 app.blade.php

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

blade 有 id 来执行操作 home.blade.php

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

Answer 1

你的代码有几个错别字，请检查没有';'的Vue.use(VueRouter)。 el:"#appp"?，虽然清除这些编译器首先失败。图旁边的步骤

Answer 2

首先，你不需要创建新的路由器实例

var router = new VueRouter({
...

并拥有

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

其次，如果你只有1个url，你期望url如何变化？

试试这个路由器

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

这里是链接（不要把<a>标签放在<router-link>里面

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