首先寫在一個頁面裡面，出現的問題不光是閱讀困難的問題，很有可能會掉進耦合的坑裡面，等到之後你想拆分的時候，拆都拆不出來。

其次，我也不建議在路由中控制，我覺得路由應該是一個歷史的記錄，比如說列表的分頁。或者是一個需要標記狀態或資料，比如說跳到分享頁面的某個位置、某某詳情頁面。

所以我的建議可能跟大家相反，我建議採用顯示和隱藏的方式。

當然如果這個頁面需要分享，比如你在tab2中點選分享，希望別人點選連結可以直接跳到tab2，那麼要搭配著路由一起用，但是不要採用子路由的方式，直接用query就好了，至於切換history的問題，使用路由裡面的類似replace方法，vue是replace、H5是replaceState、react很久沒用了，不過應該也有。

我大概講一下采用顯示和隱藏的方式我會怎麼做的吧。

我一般會把元件分為基礎元件和業務元件。

基礎元件可以理解為你的tab，複用性很高，業務元件可以理解為你的tabs裡面的具體內容，它複用很低，或者根本不能複用。

tabs怎麼去做，就不過多的去說了，如果你自己手寫建議你先去看一下第三方的元件庫都是怎麼做的，react看ant desgin，vue看element-ui。

業務元件裡面我建議是不要巢狀太深，否則資料的層層傳遞會讓你寫到吐，要麼吐，要麼上vuex或者redux。而且，你也不需要寫那麼深。為什麼呢？

前端這個往前靠產品、互動，往後貼資料和業務的職位。一般開完需求分析會，或者聽完產品經理給你的需求之後，你嗶哩吧啦寫完之後，產品經理或者領導腦門一熱，來個大調整，各種互動流程大變樣，你會發現，你能留下的大概也就只有表單的處理，和後端返回來的資料處理的。

就算是不大變樣，你業務元件最好也是用基礎元件去拼，我覺得這才是vue和react的魅力所在。

這樣不管是把資料返回到父級還是程式碼閱讀性都不會複雜。

好了。我嗶嗶完了，以上僅是個人觀點，非官網，非權威。

在一個頁面中有多個Tab的問題可以這樣來處理：

參照

工程專案管理/單位工程專案完工管理/申請列表

比如在此頁面中有三個Tab切換：

那麼要拆成四個頁面一個Mange+三個Tab的頁面