项目导入 Vue Router 4 依赖包流程

下载 Vue Router 4 的依赖包：

npm install vue-router@4

新建 router.ts 文件，导入 createRouter 以及 createWebHashHistory 函数：

import { createRouter, createWebHashHistory } from 'vue-router';

const routes = [
	{
		path: "/",
		name: "Home",
		component: () => import("./components/Home.vue")
	},
];

const router = createRouter({
	history: createWebHashHistory("/"),
	routes,
});

export default router;

createRouter()必须传入一个对象，对象的接口是 RouterOptions，有 history 以及 routes 两个必要的字段。配置路由组件就是 routes 这一字段，基本就是路由组件的 URL 路径以及 component，name 不是必须的。

在 main.ts 文件中导入新建的路由文件，Vue use() 函数加载路由插件：

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

createApp(App)
	.use(router)
	.mount("body");