本文實例講述了vue實現動態顯示與隱藏底部導航的方法。分享給大家供大家參考，具體如下：
在日常項目中，總有幾個頁面是要用到底部導航的，總有那么些個頁面，是不需要底部導航的，這里列舉一下頁面底部導航的顯示與隱藏的兩種方式：
方式一：
1. 路由配置meta: {footShow: true, }，
routes: [ { path: '/', name: 'home', redirect: '/home', // 默認路由添加class component: home, meta: { footShow: true, // true顯示，false隱藏 }, },2. 在App.vue頁面
<template> <div id="app"> <router-view/> <foot v-if="$route.meta.footShow"></foot> </div></template>
方式二：
使用watch監聽導航切換
watch: { // 監聽路由變化 $route (to, from) { let ThisPage = to.name; if (ThisPage === 'home' || ThisPage === 'healthcare' || ThisPage === 'healtharea' || ThisPage === 'personal') { this.footShow = true; } else { this.footShow = false; } } },希望本文所述對大家vue.js程序設計有所幫助。
新聞熱點
疑難解答
