利用vant给tabbar配置路由

1.在父级路由写tabbar标签

<template>
<div class="layoutContainer">
    <!-- 子路由出口 -->
    <router-view></router-view>
    <!-- 底部导航栏 -->
    <!-- 给tabbar--route属性  然后给每一项to属性就可以路由跳转了 -->
    <van-tabbar v-model="active" route>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/question">问答</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/video">视频</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
</div>
</template>

<script>
export default {
    name: 'layoutIndex',
    data() {
        return {
            active: 0
        }
    }
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
</style>

2.在路由配置的JavaScript文件中

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


Vue.use(VueRouter)
//路由表
const routes = [
  {
    path:'/login',
    name:'login',
    component:()=>import('@/views/login/')
  },
  {
    path:'/',
    component:()=>import('@/views/layout/'),
    children:[
      {
        path:'',//首页是默认子路由，所谓为空
        name:'home',
        component:()=>import('@/views/home/')
      },
      {
        path:'/question',
        name:'question',
        component:()=>import('@/views/question/')
      },
      {
        path:'/video',
        name:'video',
        component:()=>import('@/views/video/')
      },
      {
        path:'/my',
        name:'my',
        component:()=>import('@/views/my/')
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router