Я начинаю с VueRouter в Vue.js и получаю следующие ошибки:
[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>
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.
});
Начальная точка 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 [JS]](https://i.imgur.com/WsjO6zJb.png)


Наличие нескольких экземпляров Vue может привести к этой проблеме. В вашем файле player.js вы делаете
window.Event = new Vue();
затем сразу после:
let vm = new Vue({ ... })
Попробуйте удалить первый new Vue, это должно помочь. Поскольку вы регистрируете маршрутизатор глобально, вызывая Vue.use(VueRouter), у вас есть два экземпляра vue, оба со своим собственным маршрутизатором. Когда второй экземпляр подключается и пытается зарегистрировать маршрутизатор, поскольку первый экземпляр уже сделал это, вы получаете ошибку readonly.
Кроме того, экземпляры import поднимаются в верхнюю часть файла, поэтому, хотя вы объявляете window.Event = new Vue вверху, на самом деле экземпляры import возникают до любого объявления и назначения переменных.
Наличие нескольких экземпляров Vue может привести к этой проблеме ...
Я фиксированный это предупреждение: Vue warn $ attrs только для чтения. найти в ...
по линии удаление: import Vue from 'vue'
в то время как сохранение: import VueRouter from 'vue-router'
Причина исправления: vue загружался дважды. Vue импортируется вверху VueRouter. Нет необходимости импортировать его до VueRouter.
Я решил это аналогично: в main.js удалите
import Vue from 'vue'и оставьте только маршрутизатор и другие вещи ниже (при условии, что вы используете vue router)