目录

vue详情页面隐藏导航栏

2021年07月08日约 219 字预计阅读 1 分钟次阅读

目录

需求：点击进入详情页面需要隐藏导航栏和底部菜单栏

使用meta在路由配置以下信息：

1
2
3
4
5
6
routes: [
    //在首页里显示导航
    { path: '/', component: index, meta: { navShow: true}, name: 'index' },
    //在详情页面隐藏导航
    { path: '/detail', component: detail, meta: { navShow: false}, name: 'detail' },
  ],

在导航组件里:

1
<v-nar v-show="$route.meta.navShow"></v-nar>

实例

store/modules/app.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const state ={
    language: 'zh_CN,
    ifCollapse:false
}
const mutations = {
    setlanguage: (state,language)=>{
        state.language =language
    },
    switchCollapse: state=>{
        state.ifCollapse = !state.ifCollapse
    }
}
const actions ={
    setLanguage({commit},language){
        commit('setLanguage',language)
    },
    switchCollapse({commit}){
        commit('switchCollapse')
    }
}

export default {
    namespaced:true,
    state,
    mutations,
    actions
}

// 页面中使用
//进入该页面触发store中的方法隐藏侧边导航栏（菜单）
created(){
    this.$store.dispatch('app/switchCollapse')
}