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警告$ 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实例是在任何变量声明和赋值之前发生的。

RouterLink attrs是只读的

2 个答案: