The Vue mobile project implements Tarbar to be displayed only on certain pages

In Vue mobile projects, the Tarbar is usually placed in the app.vue portal, so that the Tarbar component is displayed on all pages. To solve this problem, we can add meta metadata to each routing page in the routing configuration file when using vue-Router, define a Boolean object in the meta, and add v-show to the tarbar component. Controls whether or not the page is displayed through the Boolean type defined in the application route meta. Code demo

const router = new VueRouter({
    routes:[
        {path:'/',redirect: '/home',meta: { navShow: true, }},
        {path:'/home',component: Home,meta: { navShow: true, }},
        {path:'/category',component:Category,meta: { navShow: true, }},
        {path:'/cart',component:Cart,meta: { navShow: false}}, // The meta of the CART page defines afalseNavShow, then the cart interface will not show tarbar {path:'/profile',component:Profile,meta: { navShow: true, }},
    ],
    mode: 'history',})Copy the code

<template>
  <div id="app">
    <router-view></router-view>
    <tabbar v-show="$route.meta.navShow"/>
  </div>
</template>
Copy the code