安装 Vue Router

步骤 1：安装 Vue Router

首先,你需要为你的 Vue 项目安装 Vue Router。使用以下命令添加 Vue Router 依赖：

1pnpm add vue-router@4

步骤 2：创建路由配置文件

在项目根目录下创建 router 文件夹,并在其中创建两个文件：index.ts 和 routes.ts。index.ts 将用于创建和导出路由实例,而 routes.ts 将定义路由规则。

1import { createRouter, createWebHashHistory } from "vue-router"
2import routes from "./routes.ts"
3
4export const router = createRouter({
5	history: createWebHashHistory(import.meta.env.BASE_URL),
6	routes,
7})

1import type { RouteRecordRaw } from "vue-router"
2
3const routes: RouteRecordRaw[] = [
4	{
5		path: "/",
6		name: "home",
7		component: () => import("@/pages/home/index.vue"),
8	},
9	{
10		path: "/login",
11		name: "login",
12		component: () => import("@/pages/login/index.vue"),
13	},
14]
15
16export default routes

1// 导入元数据文件
2const pages = import.meta.glob("../pages/**/meta.ts", {
3	eager: true,
4	import: "default",
5})
6
7// 导入页面组件
8const pageComponents = import.meta.glob("../pages/**/index.vue")
9
10// 创建路由配置对象
11const createRoute = ([filePath, config]: [string, unknown]) => {
12	// 从文件路径中提取路由路径
13	const path = filePath.replace("../pages", "").replace("/meta.ts", "")
14	// 从文件路径中提取路由名称
15	const name = path.split("./").filter(Boolean).join("-") || "index"
16	// 从文件路径中提取组件路径
17	const componentPath = filePath.replace("meta.ts", "index.vue")
18
19	return {
20		// 路由路径
21		path,
22		// 路由名称
23		name,
24		// 路由组件
25		component: pageComponents[componentPath],
26		// 路由元数据
27		meta: config,
28	}
29}
30
31// 根据元数据文件生成路由配置数组
32const routes = Object.entries(pages).map(createRoute)
33
34// 导出路由配置
35export default routes

:::

步骤 3：设置捕获路由

在 routes.ts 中添加一个捕获所有未匹配路由的 404 页面：

1import type { RouteRecordRaw } from "vue-router"
2
3const routes: RouteRecordRaw[] = [
4	{
5		path: "/",
6		name: "home",
7		component: () => import("@/pages/home/index.vue"),
8	},
9	{
10		path: "/login",
11		name: "login",
12		component: () => import("@/pages/login/index.vue"),
13	},
14	{ // [!code focus]// [!code ++]
15		path: "/:pathMatch(.*)*", // [!code focus]// [!code ++]
16		name: "NotFound", // [!code focus]// [!code ++]
17		component: () => import("@/pages/error/404.vue"), // [!code focus]// [!code ++]
18	}, // [!code focus]// [!code ++]
19]
20
21export default routes

步骤 4：设置滚动行为

在 index.ts 中配置路由的滚动行为,使其在路由跳转后滚动到页面顶部：

1import { createRouter, createWebHashHistory } from "vue-router"
2import routes from "./routes.ts"
3
4export const router = createRouter({
5	history: createWebHashHistory(import.meta.env.BASE_URL),
6	routes,
7	scrollBehavior() { // [!code focus]// [!code ++]
8		return { top: 0, left: 0 } // [!code focus]// [!code ++]
9	}, // [!code focus]// [!code ++]
10})

步骤 5：在 main.ts 中注册路由

在项目入口文件 main.ts 中引入并注册路由：

1// core
2import { createApp } from "vue"
3import { router } from "@/router" // [!code focus]// [!code ++]
4import App from "./App.vue"
5
6// 创建应用实例
7const app = createApp(App)
8
9// 挂载路由 // [!code focus]// [!code ++]
10app.use(router) // [!code focus]// [!code ++]
11
12// router 准备就绪后挂载应用 // [!code focus]// [!code ++]
13router.isReady().then(() => { // [!code focus]// [!code ++]
14	app.mount("#app")
15}) // [!code focus]// [!code ++]

安装 Vue Router#

安装 Vue Router