移动端新闻头条类项目，layout界面Tabbar路由切换

搭建文件夹结构

1. 创建layout文件夹，一级路由界面设为index 另外创建四个二级页面文件

2.配置一级路由信息，和4个二级路由信息

 {
    path: '/layout',
    // name: '/layout',
    redirect: '/layout/home',
    component: () => import('@/views/layout'),
    children:[
      {
        path:'', 
        name:'home',
        component: () => import('@/views/layout/HomePage'),
      },
      {
        path:'qa',
        name:'qa',
        component: () => import('@/views/layout/QaPage'),
      },
      {
        path:'video',
        name:'video',
        component: () => import('@/views/layout/VideoPage'),
      },
      {
        path:'my',
        name:'my',
        component: () => import('@/views/layout/MyPage'),
      }
    ]
  }

搭建layout一级路由tabbar底部导航栏界面

1. 在layout界面使用 <router-view> </router-view>标签显示子路由出口
2. 使用vant组件库搭建底部Tabbar界面，这里也使用插槽的方式，插入自己的字体图标

• 需求技术点：Tabbar组件里van-tabbar-item标签有自带的to属性，可以实现声明式的路由跳转，van-tabbar里有route属性可以切换路由模式，v-model可以绑定底部的切换图标高亮

• 遇到的问题：当在van-tabbar标签上同时添加 route和v-model属性时会出现两个标签同时高亮的情况

• 解决办法：两个属性留下一个就可以

• 遇到的问题：使用路由模式时会出现点击到首页标签时直接空白页面

• 解决办法：需要给每一个to属性和路由信息写完整路径，才可以正常跳转，首页的路径写的是" " 空白的默认跳转，因为没有路径可以跳所以是空白的

• 遇到的问题：在使用v-model这个属性时是根据data数据中定义的索引值来显示高亮的，所以在data数据中需要写死索引值，这就导致在刷新页面时，高亮会出现和页面不匹配的情况

• 解决办法：使用本地存储技术，将索引值存入本地，从本地中取值，这样在刷新的时候就不会出现高亮和页面不匹配的情况,这里需要注意索引值必须为数字类型，而本地存储中拿出来的是字符串需要手动转一下

 <van-tabbar class="layout-tabbar" v-model="index" >
      <van-tabbar-item to="/layout">
        <!-- day02 使用插槽的方式插入自己定义的字体图标 -->
        <i slot="icon" class="toutiao toutiao-shouye"></i>
        <!-- day02 为了方便控制文字在外层再加一个span标签 -->
        <span class="text">首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/layout/qa">
        <i slot="icon" class="toutiao toutiao-wenda"></i>
        <span class="text">问答</span>
      </van-tabbar-item>
      <van-tabbar-item to="/layout/video">
        <i slot="icon" class="toutiao toutiao-shipin"></i>
        <span class="text">视频</span>
      </van-tabbar-item>
      <van-tabbar-item to="/layout/my">
        <i slot="icon" class="toutiao toutiao-wode"></i>
        <span class="text">{{$store.state.user?'我的':'未登陆'}}</span>
      </van-tabbar-item>
    </van-tabbar>

• 问题点：van-tabbar标签，使用时间委托无法生效