• 欢迎光临~

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

开发技术 开发技术 2022-07-30 次浏览

下载 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;

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

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");
程序员灯塔
转载请注明原文链接:项目导入 Vue Router 4 依赖包流程
喜欢 (0)