vant组件库tabbar页面切换，跳转子页面tabbar隐藏，子页面跳转

目录：

App.vue:

<template>
  <div>
    <router-view/>
    <van-tabbar route active-color="#07c160" v-if="$route.meta.showTab">
      <van-tabbar-item icon="gift-o" to="/past">Past</van-tabbar-item>
      <van-tabbar-item icon="like-o" to="/">Present</van-tabbar-item>
      <van-tabbar-item icon="envelop-o" to="/feature">Feature</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

router->index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'

import Past from '@/views/Past/Past.vue'
import Present from '@/views/Present/Present.vue'
import Feature from '@/views/Feature/Feature.vue'
// import Story from '@/views/Past/Story/Story.vue'

// 把 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

const routes = [{
    path: '/past',
    component: Past,
    meta: {
      showTab:true
    },
    // children: [{
    //   path: '/past/story',
    //   name: 'Story',
    //   component:  () => import('@/views/Past/Story/Story.vue'),
    //   meta: {
    //     // showTab:true,
    //     // title: '故事',
    //     // icon: 'el-icon-document'
    //   },
    // }], 
  },
  {
    path: '/',
    component: Present,
    meta: {
      showTab:true
    },
  },
  {
    path: '/feature',
    component: Feature,
    meta: {
      showTab:true
    },
  },
  {
    path: '/past/story',
    component: () => import('@/views/Past/Story/Story.vue')
  },
  {
    path: '/past/storya',
    component: () => import('@/views/Past/Storya/Storya.vue')
  }
]


// 创建路由实例对象
const router = new VueRouter({
  routes
})

export default router

Past.vue:
点击图片跳转到 story 子页面

<router-link to="/past/story">
  <img :src="item.img" alt="" style="width: 100%;height:100%;">
</router-link>

story.vue

<template>
  <div>
    story---
    {{story}}
    <van-button type="default" @click="fanhui()">返回</van-button>
    <van-button type="default" @click="toStorya()">跳转到storya</van-button>
  </div>
</template>

<script>
import StoryInfo from '@/components/Story/StoryInfo.vue'

export default {
  name: 'Story',
  data() {
    return {
      story: [1,2,3]
    }
  },
  created(){
    console.log(this.story)
  },
  component: {
    StoryInfo
  },
  methods:{
    fanhui(){
      this.$router.push('/past')
    },
    toStorya(){
      this.$router.push('/past/storya')
    }
  }
}
</script>

<style>

</style>

storya.vue:

<template>
  <div>
    story---
    {{story}}
    <van-button type="default" @click="fanhui()">返回</van-button>
  </div>
</template>

<script>
import StoryInfo from '@/components/Story/StoryInfo.vue'

export default {
  name: 'Story',
  data() {
    return {
      story: [12,12,21]
    }
  },
  created(){
    console.log(this.story)
  },
  component: {
    StoryInfo
  },
  methods:{
    fanhui(){
      this.$router.back();
    }
  }
}
</script>

<style>

</style>