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

2022-07-30 00:32:18 阅读：124 来源： 互联网

标签：Vue vue router createRouter 导入 import routes Router 路由

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

标签：Vue,vue,router,createRouter,导入,import,routes,Router,路由
来源： https://www.cnblogs.com/shiramashiro/p/16534058.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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