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

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>

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')

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

1 个答案: