Неизвестный пользовательский элемент:- правильно ли вы зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите опцию «name»

Question

Я пытался добавить маршрутизацию на vuetify, но она не работает.Я посмотрел онлайн и нашел ошибку, но все еще не смог ее исправить.Я не вижу проблем с моим кодом, но я уверен, что существует проблема, которая вызывает эту ошибку

i tried these steps at a time:

1)
import Router from 'vue-router' Vue.use (Маршрутизатор) 2)
импорт VueRouter из 'vue-router' Vue.use (VueRouter)

у меня ни один из них не работает.Обратите внимание, что я использовал оба шага отдельно

Файл router.js содержит этот код:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Booking from './views/Booking.vue'

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

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
      {
        path: '/',
        name: 'home',
        component: Home
      },
      {
        path: '/booking',
        name: 'booking',
        component: Booking
      }
   ]
})

//The App.vue file contains this:
<template>
  <v-app class="grey lighten-4">
    <Navbar />

    <v-content>
      <router-view></router-view>
    </v-content>

    <Footer />

  </v-app>
</template>

<script>
import Navbar from './components/Navbar'
import Footer from './components/Footer'
export default {
  components: { Navbar, Footer },
  name: 'App',
  data () {
    return {

    }
  }
}
</script>

//And the Navbar contains this code after the template tag:
<script>
export default {
  data() {
    return {
      links: [
        { text: 'Home', route: '/' },
        { text: 'About', route: '/about' },
        { text: 'Booking', route: '/booking' },
        { text: 'Services', route: '/services' },
        { text: 'Pricing', route: '/pricing' }
      ]
    };
  }
};
</script>


this is the error message i'm getting:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>

Answer 1

Прежде всего измените ваш код обратно на импорт и используйте VueRouter.

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

Затем вам нужно ввести маршрутизатор с опцией router, чтобы сделать весь маршрутизатор приложения осведомленным. В вашем случае это будет означать следующее для App.vue.

<template>
  <v-app class="grey lighten-4">
    <Navbar />

    <v-content>
      <router-view></router-view>
    </v-content>

    <Footer />

  </v-app>
</template>

<script>
import Navbar from './components/Navbar'
import Footer from './components/Footer'
import router from '../router.js' // depending on your project structure

export default {
  components: { Navbar, Footer },
  name: 'App',
  router: router, // 
  data () {
    return {

    }
  }
}
</script>

Источник: https://router.vuejs.org/guide/#javascript