RouterLink attrs 是只读的 [英] RouterLink attrs is readonly
问题描述
我从 Vue.js 中的 VueRouter 开始，但出现了以下错误:
[Vue 警告]:$attrs 是只读的.在发现---><路由器链接><第二个导航>在资源\资产\js\modules\livegame\player\SecondNav.vue<播放器>在资源\资产\js\modules\livegame\player\Player.vue<根>[Vue 警告]:$listeners 是只读的.在发现---><路由器链接><第二个导航>在资源\资产\js\modules\livegame\player\SecondNav.vue<播放器>在资源\资产\js\modules\livegame\player\Player.vue<根>我已经减少了一切，结果是问题只出现在路由器上.我是根据文档做的，我不知道问题出在哪里.这是我的组件:
SecondNav.vue
<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'>历史</路由器链接></模板><脚本>导出默认{}
Player.vue
<div><second-nav></second-nav></模板><脚本>从'./SecondNav'导入SecondNav；导出默认{成分: {第二导航},}
router.js
从'vue'导入Vue；从 'vue-router' 导入 VueRouter；Vue.use(VueRouter);从'./history/History'导入历史；导出默认的新 VueRouter({模式:'历史'，路线:[{path: '/public/livegame/player/history', 组件: History, name: 'player_history'},],linkActiveClass: "active",//非精确链接的活动类.});起点 player.js
window.Event = new Vue();从'vue'导入Vue；从'./router'导入路由器从'./Player.vue'导入播放器；让 vm = 新 Vue({el: '#player',路由器，成分: {播放器},});窗口.vm = vm;我不知道问题出在哪里或我做错了什么.应用程序中的所有内容似乎都没有问题，但这些通知看起来并不完全正确.我使用的是 Vue.js 版本 2.5.16 和 VueRouter 版本 3.0.1.
拥有多个 Vue 实例会导致这个问题...
我修复这个警告:Vue warn $attrs 是只读的.发现于 ...
通过删除行:从'vue'导入Vue
同时保持:从'vue-router'导入VueRouter
修复的原因:vue 被加载了两次.Vue 在 VueRouter 的顶部导入.不需要在VueRouter之前导入.
I'm starting with VueRouter in Vue.js and I'm getting this errors:
[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>
I have reduced everything I could and the result is that problem is only in router. I did it according docs and I don't have any idea where is problem. Here are my components:
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.
});
Start point 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;
I don't know where is problem or what I'm doing wrong. Everything in application seems to work without problem but these notifications doesn't look that all is right. I'm using Vue.js version 2.5.16 and VueRouter version 3.0.1.
Having multiple Vue instances can lead to this problem...
I fixed this warning: Vue warn $attrs is readonly. found in ...
by removing line: import Vue from 'vue'
while keeping: import VueRouter from 'vue-router'
Reason why it fixed: vue was being loaded twice. Vue is imported at the top of VueRouter. There's no need to import it before VueRouter.
这篇关于RouterLink attrs 是只读的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
