Vue.js学习

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

2018-01-22  本文已影响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 中设置是因为这样可以让导航可以常驻页面,避免路由切换时导航也切换同时其他页面就不用再引入公共底部了

上一篇下一篇

猜你喜欢

热点阅读