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文件里,行不行?行!但可读性和扩展性比较差。通常为了结构更清晰采用组件的方式。

  总的来说:

    页面需要跳转?  用路由

    页面根据不同的状态展示不同的内容?  用一般组件。

posted @   蜘蛛流  阅读(717)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示