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

相关推荐
全栈前端老曹15 小时前
【Redis】Redis 客户端连接与编程实践——Python/Java/Node.js 连接 Redis、实现计数器、缓存接口
前端·数据库·redis·python·缓存·全栈
午安~婉15 小时前
构图跟拍相关
前端·javascript·拍照·虚拟列表
css趣多多15 小时前
ref和reactive
前端
leo_23215 小时前
前端&前端程序--SMP(软件制作平台)语言基础知识之六十
前端·开发工具·企业信息化·smp(软件制作平台)·应用系统
Charlie_lll15 小时前
学习Three.js–柱状图
前端·3d·three.js
前端程序猿i15 小时前
流式输出场景下的「双区域渲染」:让第三方 DOM 操作在 Vue 响应式更新中存活
前端·javascript·vue.js
css趣多多15 小时前
setup() 函数与语法糖
前端·javascript·vue.js
前端程序猿i16 小时前
第 3 篇:消息气泡组件 —— 远比你想的复杂
开发语言·前端·javascript·vue.js
1314lay_100716 小时前
color: var(--el-color-success); CSS里面使用函数
前端·css
墨染青竹梦悠然16 小时前
基于SpringBoot + vue的农产品销售系统(华夏鲜仓)
vue.js·spring boot·python·django·毕业设计·毕设