未知的自定义元素： <router-view> - 你是否正确注册了组件？ 对于递归组件，请确保提供“名称”选项

Question

我一直试图在vuetify上添加路由但它不起作用。 我在线查看并搜索错误但仍无法修复错误。 我没有看到我的代码有任何问题，但我确定存在导致此错误的问题

i tried these steps at a time:

1）
从'vue-router'导入路由器Vue.use（路由器）2）
从'vue-router'导入VueRouter 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)

然后，您需要使用路由器选项注入路由器，以使整个应用程序路由器感知。 对于你的情况，这意味着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