Vue路由和组件分别在什么场景使用

切换子路由和切换组件都能到达切换视图的效果，什么场景下该用子路由，什么场景下该使用子组件呢？ 例如：例如Tab切换，三个Tab对应不同的视图，切换Tab时，是通过逻辑控制显示不同的子组件比较好，还是添加一个子路由，通过跳转路由的方式切换视图好。 从这个问题的思考，衍生出这个问题：既然我们控制子组件的显示隐藏即可做到切换视图的目的，那么vue-router的存在比这种控制子组件切换视图的方式好在哪里呢，在开发过程中对于两种方式的选择有什么好的实践吗？

 

1. vue-router 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-is vue有个内置组件 <component /> 可以实现一些动态组件加载，就像楼主说的多Tab切换。当然官文上也介绍了。其实它跟 <router-view> 组件很像，不同的是： router-view 通过改变 URL 或编程式导航都可触发视图更新 component 只能通过编程式改变 is 的组件名字触发视图更新 所以 vue-router 和 component-is 区别还是很明显的： vue-router 适用于应用级别的页面间的导航。 而 component-is 适用于区域性功能型模块级别的导航，假如你想开发一个公共组件。 一个 router 组件下面可能包含多个 component-is 。 适合用哪个，依你的项目而定，绝大多少还是会选择 vue-router 来做路由管理， vuex 来做页面间数据存储。

 

其实它们的底层原理差不多（如果你说的「切换组件」是指 <component is>，那底层原理几乎一样），关键区别在于业务。有一个简单的原则：如果你需要用户通过 URI 直达某一个视图（包括子视图），那就用路由方案。

 

两者的层级不一样。 1.路由是对应功能页面级别。比如XXX查询列表页面。这个页面上有新增，修改，删除等等 2.在一个页面上，可能元素比较多，比如有多个tab。如果代码都写在这个vue文件里，行不行？行！但可读性和扩展性比较差。通常为了结构更清晰采用组件的方式。 简单来说，就是页面是否需要跳转？还是一个页面根据不同的状态展示不同的内容？前者是路由，后者是组件。