RouterLink 특성 읽기 전용

RouterLink 특성 읽기 전용

나는 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>

플레이어.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.
});

시작점 플레이어.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는 $attors가 읽기 전용이라고 경고한다....에서 발견되다.

라인을 제거하여:import Vue from 'vue'

보관 중:import VueRouter from 'vue-router'

그것이 고쳐진 이유: vue는 두 번 로드되고 있었다.Vue는 VueRouter의 꼭대기에서 수입된다.VueRouter 이전에 수입할 필요는 없다.

Vue 인스턴스를 여러 개 보유하면 이 문제가 발생할 수 있다.당신 안에player.js파일럿 you do you

window.Event = new Vue();

그 직후:

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

첫 번째 항목을 제거해 보십시오.new Vue도움이 될 것입니다호출을 통해 라우터를 전체적으로 등록하고 있으므로Vue.use(VueRouter)두 개의 vue 인스턴스가 있는데, 둘 다 라우터를 가지고 있다.두 번째 인스턴스가 마운트되고 라우터를 등록하려고 하면 첫 번째 인스턴스가 이미 등록되었으므로readonly착오

또한import인스턴스는 파일 맨 위에 호스트되므로 선언하는 경우에도window.Event = new Vue상위에, 현실적으로import인스턴스가 변수 선언 및 할당 전에 발생함.

참조URL: https://stackoverflow.com/questions/49936163/routerlink-attrs-is-readonly