背景

书接上回，成功跑起来一个空项目后就可以正式开始搬家了。这一节先尝试恢复路由。

安装vue-router

npm install vue-router

创建配置文件

在项目的src下创建如下结构的配置文件

src
 ├─router
 │  ├─index.js    # index中创建路由实例
 │  └─routers.js  # routers中配置路由

你也可以像许多教程里的那样将他们都放在一个index.js中，我只是遵循了旧项目中的实践。

配置路由和创建路由实例

编辑routers.js，按照如下结构配置你的路由，和Vue2中基本一样。

import Index from "@/components/HelloWorld.vue";

const routes = [
    {
        path: '/',
        redirect: '/index',
    },
    {
        path: '/index',
        component:()=> import('@/components/HelloWorld.vue')
    },

]

export default routes

编辑index.js，这里和Vue2的写法区别比较大，Vue3中不再使用new Router()创建实例，而是使用一个封装的方法createRouter()，详细参考官方文档new Router 变成 createRouter

import { createRouter, createWebHistory } from 'vue-router'
import routes from "./routers";

const router = createRouter({
    // 指定路由的模式
    history: createWebHistory(),
    routes
})
export default router

一个常见报错

如果你看到了... does not provide an export named 'default'这类的提示，那么很有可能是你使用了旧的创建方法，因在Vue在中已经不再支持直接导出某些模块了，你需要使用他们提供的方法来创建。

在main.js中全局注册

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

const app = createApp(App)
app.use(route)
app.mount('#app')

最后不要忘记在App.vue中加入router-view标签

<template>
  <div id="app">
    <!--  <img alt="Vue logo" src="./assets/logo.png" />-->
    <!--  <HelloWorld msg="Hello Vue 3.0 + Vite" />-->
    <router-view></router-view>
  </div>
</template>

一个坑点

通过Vite构建的项目中，引入Vue组件时一定要将扩展名写完整。

// 正确的写法
import Index from "@/components/HelloWorld.vue";

// 在使用Webpack构建的Vue2项目中习惯于省略扩展名，迁移后会报错
import Index from "@/components/HelloWorld";