如何在使用 Vue UI 时实现 Vue 路由器

Question

我正在使用 Vue UI，我正在尝试实现 vue 路由，但出了点问题。我有两个组件，一个称为开始，另一个称为俱乐部。出于某种原因，我在 Vue UI gui 中收到两个错误，指出它找不到这些模块。但是，它们目前位于src>组件>中。我已经浏览了文档和教程，其中一些语法略有不同，但无论如何我都无法让它工作。欢迎任何帮助。

目前，mt main.js如下;

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Start from './Start.vue'
import Clubs from './Clubs.vue'
Vue.use(VueRouter);
const routes = [
    { path: '/', components: Start },
    { path: '/clubs', components: Clubs }
];
const router = new VueRouter ({
     routes: routes
});
new Vue({
  el: '#app',
  routes,
  render: h => h(App)
});

Answer 1

您在第 10-13 行之间的代码必须如下所示，您使用components键调用，它应该是component

const routes = [
  { path: "/", component: Start },
  { path: "/clubs", component: Clubs }
];

您应该在第 21 行中使用 router 更改routes

const app = new Vue({
  el: "#app",
  router, // not 'routes'
  render: h => h(App)
});