路由模块封装

目录

一、问题引入

二、步骤


一、问题引入

随着项目内容的不断扩大,路由也会越来越多,把所有的路由配置都堆在main.js中就不太合适了,所以需要将路由模块抽离出来。其好处是:拆分模块,利于维护。

二、步骤

将路由相关的代码,移动到router文件夹下的index.js文件中(由于挪到了不同的目录,所以在导入的时候,from后面的路径要根据实际情况微调,如果目录层级比较深,可以使用@/......的方式,这代表从src目录为起点来确定文件路径),如图:

然后在main.js文件中只需要导入当前的路由,并注入到当前实例中,即可完成路由的使用。将来配置的路由的规则只需要在index.js中进行修改即可。

index.js示例如下图:

创建好路由对象router后,再通过export default router导出。这样在main.js文件中就可以通过import router from........来使用路由对象router了。

相关推荐
APIshop几秒前
实战解析电商api:1688item_search-按关键字搜索商品数据
开发语言·python
向上的车轮1 分钟前
Zed 项目GPUI :用 Rust + GPU 渲染的现代化 UI 框架
开发语言·ui·rust
oMcLin6 分钟前
如何在 CentOS 7 上通过配置和调优 OpenResty,提升高并发 Web 应用的 API 请求处理能力?
前端·centos·openresty
IT_陈寒7 分钟前
Java开发者必知的5个性能优化技巧,让应用速度提升300%!
前端·人工智能·后端
nbsaas-boot11 分钟前
Go 语言中的集合体系:从语言设计到工程实践
开发语言·后端·golang
小马_xiaoen12 分钟前
Vue3 实现超丝滑打字机效果组件 - 进阶
javascript·vue.js·ecmascript
李日灐13 分钟前
C++STL:deque、priority_queue详解!!:详解原理和底层
开发语言·数据结构·c++·后端·stl
阿坤带你走近大数据13 分钟前
JavaScript脚本语言的简单介绍
开发语言·javascript·ecmascript