Vue.js 实现路由器答案

【问题标题】：Vue.js implementing RouterVue.js 实现路由器
【发布时间】：2021-03-29 23:26:53
【问题描述】：

我正在做一个关于 Vue.js 的教程，遇到了这个问题。当我尝试在 main.js 中导入路由器时出现此问题。当我运行服务器时，我得到了这个错误。

控制台出错：

Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (main.js?56d7:6)
    at Module../src/main.js (app.js:1475)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1500)
    at __webpack_require__ (app.js:849)
    at checkDeferredModules (app.js:46)
    at app.js:925
    at app.js:928

Main.js

import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import routes from './router.js'

Vue.use(Router);


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

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

vue-router 没有暴露一个 Vue 插件，而是一个返回配置插件的构造函数。

您应该查看documentation（#Getting started 部分）。

vue-router的安装包括三个步骤：

声明您的路线并将每个视图组件分配给您的路线
导出构建的路由器
在您的应用中使用路由器。

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for `routes: routes`
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')

// Now the app has started!

【讨论】：