解决vue前端路由bug头条项目点击首页键返回不了的问题

toutiao-m项目

src/router/index.js中配置

{

    path: '/',

    redirect: '/home',

    component: () => import('@/views/layout'),

    children: [

      {

        path: '/home', // 默认子路由,只能有一个

        name: 'home',

        component: () => import('@/views/home')

      },

      {

        path: '/qa',

        name: 'qa',

        component: () => import('@/views/qa')

      },

      {

        path: '/video',

        name: 'video',

        component: () => import('@/views/video')

      },

      {

        path: '/my',

        name: 'my',

        component: () => import('@/views/my')

      }

    ]

  }

]

 重要代码 redirect: '/home',

在src/views/layout/index.vue文件中配置以下代码

<!-- 标签导航栏 -->

    <!--

        route 属性：开启路由模式

     -->

    <van-tabbar class="layout_tabbar" route >

      <van-tabbar-item to="/home">

        <i slot="icon" class="toutiao toutiao-shouye"></i>

        <span class="text">首页</span>

      </van-tabbar-item>

      <van-tabbar-item to="/qa">

        <i slot="icon" class="toutiao toutiao-wenda"></i>

        <span class="text">问答</span>

      </van-tabbar-item>

      <van-tabbar-item to="/video">

        <i slot="icon" class="toutiao toutiao-shipin"></i>

        <span class="text">视频</span>

      </van-tabbar-item>

      <van-tabbar-item to="/my">

        <i slot="icon" class="toutiao toutiao-wode"></i>

        <span class="text">我的</span>

      </van-tabbar-item>

    </van-tabbar>

    <!-- /标签导航栏 -->