vue如何实现动态显示与隐藏底部导航的方法分析-创新互联-成都快上网建站

vue如何实现动态显示与隐藏底部导航的方法分析-创新互联

这篇文章主要介绍vue如何实现动态显示与隐藏底部导航的方法分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联是一家专业提供临河企业网站建设,专注与成都做网站、成都网站制作、H5技术、小程序制作等业务。10年已为临河众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

具体如下:

在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式:

方式一:

1. 路由配置meta: {footShow: true, }

routes: [
  {
   path: '/',
   name: 'home',
   redirect: '/home', // 默认路由添加class
   component: home,
   meta: {
    footShow: true, // true显示,false隐藏
   },
  },

2. 在App.vue页面

方式二:

使用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如何实现动态显示与隐藏底部导航的方法分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站题目:vue如何实现动态显示与隐藏底部导航的方法分析-创新互联
分享URL:http://kswjz.com/article/ccgisd.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流