Атрибуты RouterLink доступны только для чтения

Я начинаю с 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.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
6
0
2 261
2

Ответы 2

Наличие нескольких экземпляров 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)

Fusseldieb 24.10.2018 14:15

Другие вопросы по теме