路由模块封装

目录

一、问题引入

二、步骤


一、问题引入

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

二、步骤

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

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

index.js示例如下图:

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

相关推荐
qq_420362031 分钟前
PDF导出服务
前端·pdf·状态模式·node·puppeteer
该用户已不存在4 分钟前
构建现代应用的9个Python GUI库
前端·后端·python
abiao19815 分钟前
VUE的“单向数据绑定” 和 “双向数据绑定”
前端·javascript·vue.js
LoveDreaMing13 分钟前
微前端-无界的实操和源码分析
前端·javascript·架构
修炼前端秘籍的小帅17 分钟前
精读《JavaScript 高级程序设计 第4版》第6章 集合引用类型(三)Map、WeakMap、Set、WeakSet
开发语言·javascript·ecmascript
@LetsTGBot搜索引擎机器人30 分钟前
打造属于你的 Telegram 中文版:汉化方案 + @letstgbot 搜索引擎整合教程
开发语言·python·搜索引擎·机器人·.net
去伪存真35 分钟前
「实测可行」Tailwind CSS 4 与 UnoCSS 最新配置全攻略:一把跑通不踩坑
前端
十八朵郁金香38 分钟前
【H5工具】一个简约高级感渐变海报H5设计工具
前端·javascript·产品运营·axure·个人开发
人工智能的苟富贵39 分钟前
使用 Tauri + Rust 构建跨平台桌面应用:前端技术的新边界
开发语言·前端·rust·electron
j_xxx404_41 分钟前
C++ STL:string类(3)|operations|string类模拟实现|附源码
开发语言·c++