zoukankan      html  css  js  c++  java
  • router-link默认的激活的 class

    点击路由连接(router-link), 默认有个 "router-link-active", 在router配置, 点击路由连接,让active类名与router-link-active"关联,active自动生效

      <div>
        <!-- 头部 -->
        <v-headers></v-headers>
    
        <div class="tab">
          <div class="tab-item">
            <router-link to='/goods'>商品</router-link>
          </div>
          <div class="tab-item">
            <router-link to='/ratings'>评论</router-link>
          </div>
          <div class="tab-item">
            <router-link to='/sellers'>商家</router-link>
          </div>
        </div>
        <!-- 路由组件显示 -->
        <router-view></router-view>
    
        <div class="footer">我是尾部</div>
      </div>

    stylus样式

     .tab-item
        flex:1
        text-align : center
        & > a
          display : block
          font-size: 14px
          color: rgb(77, 85, 93)
          &.active 
            color: rgb(240, 20, 20)

    Router选项配置

    const router = new VueRouter({
      linkActiveClass: "active",
      routes
    });

  • 相关阅读:
    二进制文件
    Python的特殊成员
    中标麒麟Linux7 如何关闭广播消息
    双重循环输出
    输出星期数
    九九乘法表
    打印菱形
    加法表
    求100以内所有偶数和
    猜大小
  • 原文地址:https://www.cnblogs.com/fsg6/p/14350906.html
Copyright © 2011-2022 走看看