Vue 使用路由链接到单页组件

Question

所有代码都在https://github.com/shanegibney/vue-component-routes

使用 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 组件包含一个应该链接到这些组件的菜单。

首页.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>

App.vue 文件也是这个样子，

<template>
  <div id="app">
    <div class="">
      I am app.vue
    </div>
    <Home />
  </div>
</template>

<script>
import Home from '@/components/Home.vue'
export default {
  name: 'app',
  components: {
    Home
  }
}
</script>

这实际上是调用 Home.vue 组件。

如果组件在 src/routes/index.js 中注册，它们应该可以全局访问吗？

另外，在我使用 $npm install vue-router 安装路由之后，我在 src 中创建了目录路由，因为它不存在。然后我将 index.js 放入路由中。也许这是不正确的。

不确定是否有用，但 main.js 看起来像这样，

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"

我认为这与 index.js 中的路由与 router-link 中的“to”路径不匹配有关。

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

任何帮助将不胜感激。

谢谢，

Answer 1

您忘记在 Vue 应用程序中注入您的路由器：

import Vue from 'vue'
import '@babel/polyfill'
import 'mutationobserver-shim'
import VueRouter from 'vue-router'
import './plugins/bootstrap-vue'
import App from './App.vue'
import router from './router' // <= here

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

new Vue({
  router, // <= and here
  render: h => h(App),
}).$mount('#app')