本文實例講述了vue實現(xiàn)動態(tài)顯示與隱藏底部導(dǎo)航的方法。分享給大家供大家參考，具體如下：
在日常項目中，總有幾個頁面是要用到底部導(dǎo)航的，總有那么些個頁面，是不需要底部導(dǎo)航的，這里列舉一下頁面底部導(dǎo)航的顯示與隱藏的兩種方式：
方式一：
1. 路由配置meta: {footShow: true, }，
routes: [ { path: '/', name: 'home', redirect: '/home', // 默認(rèn)路由添加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監(jiān)聽導(dǎo)航切換
watch: { // 監(jiān)聽路由變化 $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程序設(shè)計有所幫助。
新聞熱點
疑難解答
