zoukankan      html  css  js  c++  java
  • vue实现动态显示与隐藏底部导航的方法分析

    本文实例讲述了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程序设计有所帮助。

  • 相关阅读:
    hsdis反汇编java源码工具的使用方法
    final添加内存屏障问题
    Spring-AOP
    Spring-IOC
    IO与NIO
    设计模式学习笔记
    Redis学习笔记
    MySQL优化
    STAR法则
    大文件分割之Linux
  • 原文地址:https://www.cnblogs.com/v616/p/11282823.html
Copyright © 2011-2022 走看看