利用vant如何给tabbar配置路由

目录

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

给tabbar配置路由

在父级路由写tabbar标签

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

  标签
    标签
  标签

这里使用路由传参

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

  标签
    标签
  标签

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