Vue路由组件和一般组件在应用场景上有什么区别
切换路由组件和显示隐藏一般组件都能达到切换视图的效果,那么到底什么场景下该用子路由,什么场景下该使用子组件呢?
首先对比一下:
1. 路由组件:
vue-router 底层其实是用 hash 和 history api 来模拟浏览器的路由(前进,后退,刷新)行为的。传统的页面跳转我们可能会这样做,比如从 a.html 跳转到 b.html : a.html <a href="./b.html"> go b.thml </a> 那么组件模式下呢,比如有 a.vue 跳转到 b.vue 组件: a.vue <router-link to="/b"> go b.vue <router-link> 可以看出,路由的主要作用是让我们实现了单页面开发中的“多页面”间切换效果。
2. 一般组件:
整个 component 文件为一个页面,要是有多个所需要展示的不同页面,也可以用 显示隐藏 效果来呈现
所以可以看出:
路由是对应功能页面级别。比如XXX查询列表页面。这个页面上有新增,修改,删除等等,在一个页面上,可能元素比较多,比如有多个tab。如果代码都写在这个vue文件里,行不行?行!但可读性和扩展性比较差。通常为了结构更清晰采用组件的方式。
总的来说:
页面需要跳转? 用路由
页面根据不同的状态展示不同的内容? 用一般组件。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~