Блог

Главная - Вопросы по программированию - [Предупреждение Vue]: Неизвестный пользовательский элемент: , возможно, конфликт модулей?

[Предупреждение Vue]: Неизвестный пользовательский элемент: , возможно, конфликт модулей?

#javascript #vue.js #vue-router #mdbootstrap

Вопрос:

Я пытаюсь использовать vue-маршрутизатор внутри своего проекта, используя описание ссылки здесь.

./router/index.js

 import Vue from 'vue';
import VueRouter from 'vue-router';
import VesselSearch from '../components/VesselSearch';
import Login from '../components/Login';

Vue.use(VueRouter);

let router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'vessel-search',
            component: VesselSearch,
            meta: {
                requiresAuth: true,
            }
        },
        {
            path: '/login',
            name: 'login',
            component: Login,
            meta: {
                guest: true
            }
        },
    ]
})

export default router;

main.js

 import '@fortawesome/fontawesome-free/css/all.min.css'
import 'mdbvue/lib/css/mdb.min.css'
import Vue from 'vue/dist/vue.js';
import App from './App';
import router from './router';
import InstantSearch from 'vue-instantsearch';

Vue.config.productionTip = false;

Vue.use(InstantSearch);

new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>',
})

Если я проверю, используя npm list vue-router , я получил:

  -- mdbvue@6.7.3
| `-- vue-router@3.5.2  deduped
`-- vue-router@3.5.2

Похоже, у меня есть 2 модуля vue-маршрутизатора, один из которых включен в mdbootstrap модуль. Если это проблема, как я могу ее решить?

Ответ №1:

Проблема здесь в том, что вы регистрировали маршрутизатор в другом экземпляре vue, и этот экземпляр не имеет основного компонента. Вот решение В вашем router/index.js удалите линии

  import VueRouter from 'vue-router';
 Vue.use(Router)

и в вашем main.js добавьте эти строки

  import VueRouter from 'vue-router';
 Vue.use(Router)

Вы можете проверить это здесь
https://codesandbox.io/s/lively-voice-1dutp

Комментарии:

1. Привет, это сработало! Но мне все еще нужны эти строки в router/index.js . Если я удалю его, это выдаст мне ошибку. Интересно, почему. Можете ли вы объяснить подробно?

2. То же, что и предыдущая ошибка [Предупреждение Vue]: Неизвестный пользовательский элемент: <просмотр маршрутизатора>-вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр «имя».

3. Я не знаю, как вы структурировали свой код. Но если вы будете держать его там и он будет работать, я думаю, что с вами все в порядке. Но вам, возможно, придется посмотреть, как вы создаете свой Vue. Теоретически, вам нужно зарегистрировать маршрутизатор только с одним экземпляром vue

Метки: , ,