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>
  • 相关阅读:
    HTML介绍
    python D41 前端初识
    mysql索引原理与查询优化
    python D41
    python D40 pymsql和navicat
    python D40 以及多表查询
    python D35 selectors模块
    python D35 I/O阻塞模型
    测试过程
    测试基础
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15110327.html
Copyright © 2011-2022 走看看