zoukankan      html  css  js  c++  java
  • vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失

    在实际开发中,嵌套路由经常会用到,基本用法也很简单,今天遇到了当前路由下(父路由)在点击它的子路由时,他的(父路由)选中状态消失了

    原因是:

    1.子路由router-link加了exac精确匹配路由

    2.在写路由的时候,父子路由没有严格按照一级/二级来写

    嵌套路由中默认选中第一个子路由

    {
              path: '/dec', // 设备中心,主路由
              redirect: '/dec/decOverview',
              name: 'decIndex',
              component: DecIndex,
              meta: {
                title: '设备中心'
              },
              children: [
                {
                  path: '/dec/decOverview', // 子路由前面一定要加上主路由,在切换的时候还是会匹配主路由,主路由高亮不会消失
                  name: 'decOverview',
                  component: DecOverview,
                  meta: {
                    title: '设备概览'
                  }
                },
                {
                  path: '/dec/decUse/onlineRate', // 默认的子路由
                  name: 'onlineRate',
                  component: OnlineRate,
                  meta: {
                    title: '设备在线率'
                  }
                },
    

      主路由的设置:

    <li>
              <router-link class="classify" tag="div" to="/dec" event="click"> exac不要加
                <i class="iconfont sjzx">�</i>
                <span>设备中心</span>
              </router-link>
            </li>
            <li>
              <router-link class="classify"  tag="div" to="/user" event="click">
                <i class="iconfont user">�</i>
                <span>用户中心</span>
              </router-link>
            </li>
    

     router-link 作为 vue 中的路由跳转标签,它内置有一个选中的状态,当处于当前路由时,会给 router-link 加一个 router-active-class,即选中状态的 class,同时还提供有一个 exact 属性,当加了 exact 属性的时候表示精确匹配,也就是会精确匹配 Url,所以如果给主路由设置了 exact 属性的话,当处于子路由时,Url 就匹配不到主路由了,那么主路由也就不会处于选中状态。所以解决办法就是不要在主路由和子路由的 router-link 上设置 exact 属性,问题即可解决。 

  • 相关阅读:
    SQLSERVER FUNCTIONS
    批处理命令学习
    java回调
    android布局中容易混淆的几个属性
    UML类图关系
    android面试试题
    Handler基础
    Android中自定义属性的使用
    php中钩子函数&实现
    Handler高级
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/9492659.html
Copyright © 2011-2022 走看看