其他分享
首页 > 其他分享> > 项目导入 Vue Router 4 依赖包流程

项目导入 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;

image

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,vue,router,createRouter,导入,import,routes,Router,路由
来源: https://www.cnblogs.com/shiramashiro/p/16534058.html