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

我已尽力减少一切,结果是问题仅出在路由器上。我做到了根据文档,我不知道哪里出了问题。这是我的组件:

二次导航
<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>

播放器
<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.
});

起点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。

最佳答案

具有多个Vue实例可能会导致此问题...

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

删除行:import Vue from 'vue',以生成

同时保留:import VueRouter from 'vue-router'
修复原因:vue被加载了两次。 Vue导入在VueRouter的顶部。无需在VueRouter之前导入它。

07-28 07:36