《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 中監聽 路由的變化 (打印結果在上一步)