vue3使用vue-router总是报错，第一次报错信息如下：

原因：vue3有了新的写法，不再支持vue2的写法：

vue2时router.js如下：

 import Vue from 'vue'
 import VueRouter from 'vue-router'

// // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
Vue.use(VueRouter);

// // 1. 定义 (路由) 组件。可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
import index from "../views/index";

// // 2. 定义路由,每个路由应该映射一个组件。
// // 其中"component" 可以是通过 Vue.extend() 创建的组件构造器
// // 或者，只是一个组件配置对象。
export const routes = [
    { path: '/foo', component: Foo }
    { path: '/index', component: index }
]

// // 3. 创建 router 实例，然后传 `routes` 配置

const router = new VueRouter({
    routes
 })
export default router 

对应的main.js如下：

import Vue from 'vue'
import App from './App.vue';
import router from "./router/index";

Vue.use(router)

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

vue3中应该这么写：

router.js

import {createRouter} from "vue-router"
import {createWebHashHistory} from "vue-router"

const helloWorld = () => import("../components/HelloWorld")
const index = () => import("../views/index")

const routes = [
  { path: "/", redirect: "/helloWorld" },
  {
    path: "/helloWorld",
    name: "helloWorld",
    component: helloWorld
  },
  {
    path: "/index",
    name: "index",
    component: index
  }
]

export const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

对应main.js：

import { createApp } from 'vue'
import App from './App.vue';
import {router} from "./router/index";

const app = createApp(App,router);
app.mount('#app');
app.use(router)

这么写之后会提示：

对应的浏览器控制台会报：Uncaught (in promise) TypeError: Object(...) is not a function at eval这样的错，大概是这样，具体没截图。

解决方式：

npm install vue-router@next --save

安利另一个知识点啦，细心的小可爱们一定已经发现了import {router} from "./router/index";在2版本与3版本写的不一样，关键就在于export 与export default.详见下一篇文章哦！