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

　　总的来说：

　　　　页面需要跳转？　　用路由

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