Vue基础知识:路由的封装抽离,路由模块的封装抽离的好处是什么?,如何快速的引入组件,基于@指代src目录,从src目录出发找组件

如果将所有的路由配置都存放在main.js中,是非常有问题的,杂且乱。所以我们要将路由模块进行抽离,这样有利于:拆分模块,利于维护。大致的做法就是将路由相关的东西放到router这个文件夹的index.js中,而将来只需要将index.js导入到main.js中渲染就可以了。

具体步骤演示:

1.在src文件夹中创建router文件夹

2.在router中创建index.js

3.复制粘贴main.js中关于路由相关的代码到router中index.js中

(其中有三个注意点,要导入vue和导出router这个对象,并且路径不要搞错)

快速引入组件:

基于@指代src目录,从src目录出发找组件

4.在main.js中导入router中的index.js文件

相关推荐
CodeSheep几秒前
同事偷偷给我介绍私活,说1万报酬全给我,结果甲方私下告诉我说,同事在当中白拿了2万,我觉得被耍了,媳妇却让我要知足,说我一点不亏
前端·后端·程序员
Betelgeuse762 分钟前
告别传统 ModelForm:用 React 与 DRF 打造现代化项目管理表单
前端·react.js·django·前端框架
IT_陈寒3 分钟前
SpringBoot这个"自动配置"差点让我加班到凌晨
前端·人工智能·后端
遗憾随她而去.5 分钟前
react学习(一)
javascript·学习·react.js
恋恋风尘hhh6 分钟前
文字点选验证码前端安全研究:以网易易盾(dun.163)为例
前端·安全
鹏程十八少6 分钟前
1.2026金三银四 Android Glide 23连问终极拆解:生命周期、三级缓存、Bitmap复用,大厂面试官到底想听什么?
android·前端·面试
hhhhhh_we6 分钟前
预颜美历:AI驱动的私人面部美学与皮肤全周期管理工具
前端·图像处理·人工智能·python·aigc
Cobyte7 分钟前
5.响应式系统比对:手写 React 响应式状态库 Mobx
前端·javascript·vue.js
鹓于8 分钟前
PPT VBA随机选题系统实现详解
java·前端·javascript
前端双越老师16 分钟前
OpenClaw 实战记录:前端 VS 全栈 招聘岗位分析
前端·agent·全栈