Você pode criar um plugin para armazenar algumas configurações:
./components/config/index.js
import Vue from 'vue'
const globalConfig = new Vue({
data: {
menu: {
show: true,
hide_from_pages: [ 'Contact' ]
}
},
methods: {
show_or_hide: function(page) {
this.menu.show = this.menu.hide_from_pages.includes(page) ? false : true;
}
}
});
globalConfig.install = () => {
Object.defineProperty(Vue.prototype, 'globalConfig', {
get () { return globalConfig }
});
};
export default globalConfig
Importe no arquivo main.js
...
import globalConfig from './config'
...
Vue.use(globalConfig);
Adicione a função scrollBehavior
em sua instancia VueRouter
chamando o método show_menu
, passe como parâmetro o nome da pagina carregada.
new Router({
routes: [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
{ path: '/contact', name: 'Contact', component: Contact },
],
scrollBehavior (to, from, savedPosition) {
globalConfig.show_menu(to.name)
}
})
Utilize a diretiva v-show
em no componente:
<menuv v-show="globalConfig.menu.show"></menuv>
Referências
vuex
~