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

相关推荐
社恐的下水道蟑螂4 分钟前
LangChain 进阶实战:从玩具 Demo 到生产级 AI 应用(JS/TS 全栈版)
前端·langchain·openai
Fairy要carry7 分钟前
项目01-手搓Agent之loop
前端·javascript·python
亲亲小宝宝鸭12 分钟前
Ctrl ACV工程师的提效之路:删掉项目中的冗余
前端
kyriewen15 分钟前
DOM树与节点操作:用JS给网页“动手术”
前端·javascript·面试
米饭同学i19 分钟前
基于腾讯云COS的小程序素材上传功能实现
前端·javascript·react.js
cxxcode19 分钟前
前端性能指标接入 Prometheus 技术方案
前端
辣椒炒代码19 分钟前
🚀 AI Agent 入门实战:基于 LangChain + MCP 构建智能导游助手
前端
ruanCat24 分钟前
前端工程化工具链从零配置:simple-git-hooks + lint-staged + commitlint
前端·git·代码规范
光影少年26 分钟前
如何开发一个CLI工具?
javascript·测试工具·前端框架·node.js
哈__36 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-fingerprint-scanner
javascript·react native·react.js