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文件

相关推荐
宇余8 小时前
从 useState 到 URLState:前端状态管理的另一种思路
前端·vue.js
白兰地空瓶8 小时前
🚀 10 分钟吃透 CSS position 定位!从底层原理到避坑实战,搞定所有布局难题
前端·css
T___T8 小时前
Ajax 数据请求详解与实战
javascript·面试
onthewaying8 小时前
在Android平台上使用Three.js优雅的加载3D模型
android·前端·three.js
冴羽8 小时前
能让 GitHub 删除泄露的苹果源码还有 8000 多个相关仓库的 DMCA 是什么?
前端·javascript·react.js
悟能不能悟8 小时前
jsp怎么拿到url参数
java·前端·javascript
程序猿小蒜9 小时前
基于SpringBoot的企业资产管理系统开发与设计
java·前端·spring boot·后端·spring
Mapmost9 小时前
零代码+三维仿真!实现自然灾害的可视化模拟与精准预警
前端
程序猿_极客9 小时前
JavaScript 的 Web APIs 入门到实战全总结(day7):从数据处理到交互落地的全链路实战(附实战案例代码)
开发语言·前端·javascript·交互·web apis 入门到实战
suzumiyahr9 小时前
用awesome-digital-human-live2d创建属于自己的数字人
前端·人工智能·后端