I'm learning vues and now I've come across a difficulty in hiding components when showing the other routes for example:
<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>
How do I hide a component as soon as the route loads?
You can create a plugin to store some settings:
./ 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
Import into main.js file
...
import globalConfig from './config'
...
Vue.use(globalConfig);
Add the scrollBehavior function in your instance VueRouter by calling the method show_menu , pass as parameter the name of the page loaded.
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)
}
})
Use the v-show directive on the component:
<menuv v-show="globalConfig.menu.show"></menuv>