路由模块封装

目录

一、问题引入

二、步骤


一、问题引入

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

二、步骤

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

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

index.js示例如下图:

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

相关推荐
We་ct4 分钟前
深度剖析浏览器跨域问题
开发语言·前端·浏览器·跨域·cors·同源·浏览器跨域
skywalk816313 分钟前
在考虑双轨制,即在中文语法的基础上,加上数学公式的支持,这样像很多计算将更加简单方便,就像现在的小学数学课本里面一样,比如:定x=2*x + 1
开发语言
小书房16 分钟前
Kotlin的by
android·开发语言·kotlin·委托·by
weixin_4277716129 分钟前
前端调试隐藏元素
前端
就叫飞六吧32 分钟前
QT写一个桌面程序exe并动态打包基本流程(c++)
开发语言·c++
threelab41 分钟前
Three.js 代码云效果 | 三维可视化 / AI 提示词
开发语言·javascript·人工智能
V搜xhliang02461 小时前
OpenClaw科研全场景用法:从文献到实验室的完整自动化方案
运维·开发语言·人工智能·python·算法·microsoft·自动化
kaikaile19951 小时前
风、浪、流环境模型的船舶三自由度(纵荡、横荡、艏摇)运动仿真MATLAB
开发语言·人工智能·matlab
fish_xk1 小时前
map和set
java·开发语言
李崧正1 小时前
Java技术分享:Lambda表达式与函数式编程
java·开发语言·python