0

Estou aprendendo vuejs e agora me deparei com uma dificuldade na parte de esconder componentes quando mostrar as outras rotas por exemplo:

<template>
  <div id="app">
     <ion-icon name="help-circle-outline" class="help"></ion-icon>
     <menuv></menuv><!-- componente a ser escondido quando a rota for carregada -->
     <router-view></router-view>
  </div>
</template>

Como faço para esconder um componente assim que a rota for carregada?

2
  • Cara isto envolve um contexto bem maior do que este código que colocou aqui. Basicamente você terá que colocar um v-if na tag menu validando conforme a rota.
    – LeAndrade
    30/10/2018 às 20:55
  • ~Utilize vuex~ 2/11/2018 às 11:58

1 Resposta 1

0

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .