本文实例讲述了vue实现动态显示与隐藏底部导航的方法。分享给大家供大家参考,具体如下:
在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式:
方式一:
1. 路由配置meta: {footShow: true, }
,
1
2
3
4
5
6
7
8
9
10
|
routes: [
{
path:
'/'
,
name:
'home'
,
redirect:
'/home'
,
// 默认路由添加class
component: home,
meta: {
footShow:
true
,
// true显示,false隐藏
},
},
|
2. 在App.vue页面
1
2
3
4
5
6
|
<
template
>
<
div
id
=
"app"
>
<
router-view
/>
<
foot
v-if
=
"$route.meta.footShow"
></
foot
>
</
div
>
</
template
>
|
方式二:
使用watch监听导航切换
1
2
3
4
5
6
7
8
9
10
|
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程序设计有所帮助。