切換子路由和切換組件都能到達切換視圖的效果，什么場景下該用子路由，什么場景下該使用子組件呢？ 例如：例如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文件里，行不行？行！但可讀性和擴展性比較差。通常為了結構更清晰采用組件的方式。 簡單來說，就是頁面是否需要跳轉？還是一個頁面根據不同的狀態展示不同的內容？前者是路由，后者是組件。