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 last version）< /强>

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

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>

刀片有id动作home.blade.php

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

Answer 1

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

var router = new VueRouter({
...

并拥有

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

其次，如果你只有1个网址，你如何期望网址改变？

试试此路由器

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>

Answer 2

您的代码中有几个拼写错误，请在没有';'的情况下查看Vue.use（VueRouter）。 el：“＃appp”?,清除这些编译器首先失败。步骤旁边的图