美文网首页Vue.js学习
vue 如何设置在一级页面有底部导航 进入二级页面隐藏

vue 如何设置在一级页面有底部导航 进入二级页面隐藏

作者: 施主画个猿 | 来源:发表于2018-01-22 16:36 被阅读609次

    可以在 全局路由控制中设置meta属性参考路由元信息(https://router.vuejs.org/zh-cn/advanced/meta.html),然后通过在路由中设置

    routes: [
       //  首页
            {
                path: '/',
                name: 'index',
                component: index,
                // 是否开启底部导航
                meta: {
                    // 路由层级,数值越大层级越深,以此决定转场动画的前进和后退 大于前进,小于后退
                    index: 0,
                    showFooter: true
                }
                // components:{
                //   default:Content,
                //   a:Index
    
                // }
            },
            //其他页面
            {
                path: '/notice/content/:id',
                name: 'content',
                component: content,
                // 是否开启底部导航
                meta: {
                    // 路由层级,数值越大层级越深,以此决定转场动画的前进和后退 大于前进,小于后退
                    index: 1,
                    showFooter: false
                }
            },
    ]
    

    来设置,这样在app.vue 中可以通过

    <vuefooter v-show="$route.meta.showFooter"></vuefooter>
    

    来控制公告底部的显示 在app.vue 中设置是因为这样可以让导航可以常驻页面,避免路由切换时导航也切换同时其他页面就不用再引入公共底部了

    相关文章

      网友评论

      • 枫_8152:楼主 这个如果后退的话 底部的导航不显示

      本文标题:vue 如何设置在一级页面有底部导航 进入二级页面隐藏

      本文链接:https://www.haomeiwen.com/subject/xttraxtx.html