zoukankan      html  css  js  c++  java
  • vue路由精确匹配模式 exact

    给当前路由加上active类名高亮显示:

    <template>
      <div id="app">
        <router-link to='/' active-class="active">首页</router-link> |
        <router-link :to="{name:'about'}" active-class="active">关于</router-link>
        <router-view></router-view>
      </div>
    </template>
    .active{
      color: greenyellow;
    }

    此时,点击“关于”时两个都高亮了

    原因是默认情况下路由是包含匹配模式,也就是 / 和 /about 都是 / 开头,以 / 开头的路由都会被匹配上active类名

    解决:

    1、给 / 路由加上exact属性,/ 就变成了精确匹配模式,必须是 / 才会匹配过来,/about不会匹配过来

    <template>
      <div id="app">
        <router-link to='/' active-class="active" exact>首页</router-link> |
        <router-link :to="{name:'about'}" active-class="active">关于</router-link>
        <router-view></router-view>
      </div>
    </template>

    2、补全 / 的路径(/home)

    <template>
      <div id="app">
        <router-link to='/home' active-class="active">首页</router-link> |
        <router-link :to="{name:'about'}" active-class="active">关于</router-link>
        <router-view></router-view>
      </div>
    </template>
  • 相关阅读:
    函数库:静态库和动态库
    预处理
    共用体、大端小端的判断、枚举
    结构体内存对齐及大小的判断
    内存的管理方式
    指针的高级应用
    H5+css3属性随笔
    项目实战——仿360囧图
    利用css3的动画实现图片轮播
    了解HTML5大纲算法
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15110327.html
Copyright © 2011-2022 走看看