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

相关推荐
c***V32323 分钟前
Vue优化
前端·javascript·vue.js
努力往上爬de蜗牛1 小时前
react native真机调试
javascript·react native·react.js
李@十一₂⁰2 小时前
HTML 特殊字体符号
前端·html
y***86693 小时前
TypeScript在Electron应用中的使用
javascript·typescript·electron
小奶包他干奶奶4 小时前
Webpack学习——Loader(文件转换器)
前端·学习·webpack
zy happy5 小时前
若依 vue3 报错:找不到模块“@/api/xxxx/xxxxx”或其相应的类型声明。。Vue 3 can not find mod
前端·javascript·vue.js
潘小安5 小时前
Git Worktree + Claude Code:让你的开发效率翻倍的秘密武器
前端
meichaoWen5 小时前
【Vue3】vue3的全面学习(一)
前端·javascript·学习
小猪努力学前端6 小时前
在 React + React Router v7 SSR 项目里做多端适配,我踩的两个坑
前端·react.js
q***d1736 小时前
React桌面应用开发
前端·react.js·前端框架