Vue используя роутер-ссылку на одностраничные компоненты

Question

Весь код на https://github.com/shanegibney/vue-component-routes

Используя Vue3.8.3, я пытаюсь использовать и ссылаться на одностраничные компоненты.Эти компоненты зарегистрированы в src / routs / 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 / router / 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, не совпадающими с путями "to" в router-link.

Как я могу обеспечить включение 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')