RouterLink attrs是只读的

Question

我从Vue.js中的VueRouter开始,我收到了这个错误:

[Vue warn]: $attrs is readonly.

found in

---> <RouterLink>
   <SecondNav> at resources\assets\js\modules\livegame\player\SecondNav.vue
     <Player> at resources\assets\js\modules\livegame\player\Player.vue
       <Root>

[Vue warn]: $listeners is readonly.

found in

---> <RouterLink>
   <SecondNav> at resources\assets\js\modules\livegame\player\SecondNav.vue
     <Player> at resources\assets\js\modules\livegame\player\Player.vue
       <Root>

我已经减少了我所能做的一切,结果是问题只出现在路由器中.我按照文档做了,我不知道问题出在哪里.这是我的组件:

SecondNav.vue

<template>
<div class="row second-top-nav">
    <div class="col-md-offset-1 col-md-11">
        <ul class="nav">
            <li>
                <router-link to='/public/livegame/player/history'>
                    History
                </router-link>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
    export default {}
</script>

Player.vue

<template>
<div>
    <second-nav></second-nav>
</div>
</template>

<script>
import SecondNav from './SecondNav';

export default {
    components: {
        SecondNav
    },
}
</script>

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import History from './history/History';

export default new VueRouter({
   mode: 'history',
   routes: [
    {path: '/public/livegame/player/history', component: History, name: 'player_history'},
   ],
   linkActiveClass: "active", // active class for non-exact links.
});

起点玩家.js

window.Event = new Vue();

import Vue from 'vue';

import router from './router'
import Player from './Player.vue';

let vm = new Vue({
   el: '#player',
   router,
   components: {
      Player    
   },
});

window.vm = vm;

我不知道问题出在哪里或者我做错了什么.应用程序中的所有内容似乎都没有问题,但这些通知看起来并不是一切都是正确的.我正在使用Vue.js版本2.5.16和VueRouter版本3.0.1.

Answer 1

拥有多个 Vue 实例会导致这个问题......

我修复了这个警告：Vue warn $attrs 是只读的。在发现 ...

通过删除行：import Vue from 'vue'

同时保持：import VueRouter from 'vue-router'

修复的原因：vue 被加载了两次。Vue 在 VueRouter 的顶部导入。不需要在 VueRouter 之前导入它。

Answer 2

拥有多个 Vue 实例可能会导致此问题。在你的player.js文件中你做你

window.Event = new Vue();

然后紧接着：

let vm = new Vue({ ... })

尝试删除第一个new Vue，这应该有帮助。由于您通过调用全局注册路由器，因此Vue.use(VueRouter)您有两个 vue 实例，它们都有自己的路由器。当第二个实例安装并尝试注册路由器时，由于第一个实例已经这样做了，因此您会收到错误readonly。

此外，import实例也被提升到文件的顶部，因此尽管您window.Event = new Vue在顶部声明，但实际上import实例是在任何变量声明和赋值之前发生的。