javascript - RouterLink attrs is readonly - Stack Overflow

admin管理员组

文章数量:1430756

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 ponents:

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 {
    ponents: {
        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', ponent: 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,
   ponents: {
      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.

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 ponents:

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 {
    ponents: {
        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', ponent: 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,
   ponents: {
      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.

• javascript
• vue.js
• vuejs2
• vue-ponent
• vue-router

Share Improve this question Follow asked Apr 20, 2018 at 7:19 Jaroslav KlimčíkJaroslav Klimčík 4,8481313 gold badges4141 silver badges6060 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

Having multiple Vue instances can lead to this problem. In your player.js file you do you

window.Event = new Vue();

then immediately after:

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

Try removing the first new Vue, that should help. Since you are registering the router globally by calling Vue.use(VueRouter) you have two vue instances, both with their own router. When the second instance mounts and tries to register the router, since the first instance already did so, you get the readonly error.

Also import instances are hoisted to the top of the file, so although you declare window.Event = new Vue at the top, realistically the import instances are occurring before any variable declaration and assignment.

本文标签： javascriptRouterLink attrs is readonlyStack Overflow