vue-router 淘寶首頁底部tab實現 (命名路由)

vue-router實現app底部tabbar切換頁面

我一直對vue-router命名視圖這個功能存在疑惑，沒有找到這個使用東西場景。

甚至過了2年後的今日幾乎忘記這個東西了，突然因爲項目需求的引導，發現了他的用處，暫且記錄下

主頁面

<router-view ></router-view>
<router-view name="tabBar"></router-view>

路由：
 

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        tabBar: Bar,
      }
    },
   {
      path: '/mine',
      components: {
        default: Mine,
        tabBar: Bar,
      }
    }
  ]
})

 

底部切換的組件抽離出去，如果頁面需要攜帶底部tabBar在路由添加就可以方便解決少耦合。