Vue.js 使用路由器链接到单页组件的Vue

所有代码都在

使用Vue3.8.3，我尝试使用和链接到单页组件。这些组件在src/routes/index.js中注册，文件如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(VueRouter)

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/about',
    name: 'About',
    component: About
  }]
})

这样就可以设置路线了

然后Home.vue组件包含一个菜单，该菜单应链接到这些组件

Home.vue

<template>
  <div class="home">
  <b-navbar type="light" variant="light" toggleable="md">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <b-collapse is-nav id="nav_collapse">
      <b-navbar-nav>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style>
</style>

我收到的错误提到“不匹配”

[Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"

我认为这与index.js中的路由和路由器链接中的“to”路径不匹配有关

如何确保index.js包含在应用程序中

任何帮助都将不胜感激

---

谢谢，

您忘记将路由器插入Vue应用程序：

从“Vue”导入Vue
导入“@babel/polyfill”
导入'mutationobserver shim'
从“vue路由器”导入VueRouter
导入“./plugins/bootstrap vue”
从“./App.vue”导入应用程序
从“/router”/@Sovaline导入路由器太棒了谢谢，你帮我走出了困境：）非常感谢
import Vue from 'vue'
import '@babel/polyfill'
import 'mutationobserver-shim'
import VueRouter from 'vue-router'
import './plugins/bootstrap-vue'
import App from './App.vue'

Vue.use(VueRouter)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

[Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"