利用vant如何给tabbar配置路由

目录

• 给tabbar配置路由
• 在父级路由写tabbar标签
• 在路由配置的JavaScript文件中
• vant踩坑记录
• tabbbar路由模式
• 这里使用路由传参

给tabbar配置路由

在父级路由写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>

在路由配置的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

vant踩坑记录

tabbbar路由模式

<router-view />
<van-tabbar route>
  <van-tabbar-item replace to="/home/menu/资源" icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item replace to="/home/menu/信息" icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item>
</van-tabbar>

这里使用路由传参

二级路由跳转到子级页面，返回以后，tabbar按钮高亮消失，原因是传递的参数不能是汉字，改为英文就好了

<router-view />
<van-tabbar route>
  <van-tabbar-item replace to="/home/menu/resources" icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item replace to="/home/menu/information" icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item>
</van-tabbar>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。