《vue》實現動態顯示與隱藏底部導航方法！

在平常項目中，總有幾個頁面是要用到底部導航的，總有那麼些個頁面，是不須要底部導航的，這裏列舉一下頁面底部導航的顯示與隱藏的兩種方式：

其實很簡單，咱們在路由裏面帶上參數，這個參數就用來區分那個頁面顯示那個頁面不顯示。在vue官網裏面有提到一個路由元信息的玩意，感興趣的朋友能夠看看，這裏我就很少說直接貼代碼了。

第一種

在路由js中添加  meta 

meta: { footShow: true, // true顯示，false隱藏 },

第二步：在app.vue中獲取路由傳的參數

 

咱們在四個一級頁面帶上navShow字段，而後經過$route.meta.navShow獲取到數據，再判斷是否顯示就能夠。

 

第二種，使用 使用watch監聽導航切換

 router 路由的配置

 {
   path: '/',
   name: 'home',
   redirect: '/home', // 默認路由添加class
   component: home,
   meta: {
    footShow: true, // true顯示，false隱藏
   },
  },

1.1在路由中添加 name="" 能夠不添加，但在app.vue 中獲取的值能夠用path 判斷 console.log（）打印的值爲：

 

 

 

 1.2 在  app.vue 中監聽 路由的變化 (打印結果在上一步)