RouterLink attrs 是只读的答案

【问题标题】：RouterLink attrs is readonlyRouterLink attrs 是只读的
【发布时间】：2018-09-30 20:20:39
【问题描述】：

我从 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>

播放器.vue

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

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

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

路由器.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.
});

起点 player.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 版。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

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

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

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

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

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

【讨论】：

我解决了类似的问题：在 main.js 中删除 import Vue from 'vue' 并只留下路由器和下面的其他东西（假设您使用的是 vue 路由器）

【解决方案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 实例发生在任何变量声明和赋值之前。

【讨论】：