Analysis of methods for realizing dynamic display and hidden bottom navigation by vue

This article describes the method of Vue to implement dynamic display and hidden bottom navigation. Share it for your reference, as follows:

In daily projects, there are always several pages that need to be used for the bottom navigation, and there are always some pages that do not require the bottom navigation. Here are two ways to display and hide the bottom navigation of the page:

Method 1:

1. Routing configurationmeta: {footShow: true, }，

routes: [
  {
   path: '/',
   name: 'home',
   redirect: '/home', // Add class to default route   component: home,
   meta: {
    footShow: true, // true shows, false hides   },
  },

2. On the page

<template>
 <div >
  <router-view/>
  <foot v-if="$"></foot>
 </div>
</template>

Method 2:

Use watch monitor navigation toggle

watch: { // Listen to routing changes  $route (to, from) {
   let ThisPage = ;
   if (ThisPage === 'home' || ThisPage === 'healthcare' || ThisPage === 'healtharea' || ThisPage === 'personal') {
     = true;
   } else {
     = false;
   }
  }
 },

I hope this article will be helpful to everyone's programming.