Vue H5项目实现根据路由来实现底部切换栏，刷新页面保持高亮

HTML中：

​

<!-- 根据路由位置给底部菜单进行高亮显示 -->
        <div :class="['enterprise',$route.meta.index==0? 'active': '' ]" @click="goPage1()" >
            <!-- <i class="el-icon-office-building"></i> -->
            <span class="iconfont icon-qqq"></span>
            <h1>首页</h1>
        </div>

        <div :class="['statistics',$route.meta.index==1? 'active': '' ]" @click="goPage2()" > 
            <!-- <i class="el-icon-office-building"></i> -->
            <span class="iconfont icon-ttt"></span>
            <h1>我的</h1>
        </div>

​

路由:index.js中

{
          path: 'index',
          name: 'index',
          component: () => import('../views/home/index'),
          meta: {
            index:0,
            title: '首页'
          }
        },
        {
            path: 'stat',
            name: 'stat',
            component: () => import('../views/home/stat'),
            meta: {
              index:1,
              title: '我的'
            }
        },

css中：

// 根据路由位置给底部菜单进行高亮显示
    .active{
        color:#4586F0;
    }