zoukankan      html  css  js  c++  java
  • router-link 自定义点击事件

    <li v-for="(item, index) in menuList">
         <router-link class="classify" tag="div" :to="{path: item.listLink}" @click.native="clkTag(index)">  <!-- 默认 event="click" -->
            <i class="iconfont img" v-if="selected === index"><img :src="item.iconSelect" alt=""></i>
            <i class="iconfont img" v-else><img :src="item.icon" alt=""></i>
             <span>{{ item.listTitle }}</span>
          </router-link>
    </li>

    注意:@click.native加上原生的点击事件

    路由监听:

    <script>
    export default {
      name: 'dataCenterLayout',
      data () {
        return {
          selected: null,
          menuList: [
            {
              listTitle: '设备中心',
              listLink: '/dec',
              iconSelect: require('@/assets/images/bigData/icon_equipment_Select.png'),
              icon: require('@/assets/images/bigData/icon_equipment.png')
            },
            {
              listTitle: '用户中心',
              listLink: '/user',
              iconSelect: require('@/assets/images/bigData/icon_user_Select.png'),
              icon: require('@/assets/images/bigData/icon_user.png')
            }
          ]
        }
      },
      mounted () {
        this.clkTag()
      },
      watch:{   //监听路由变化
        '$route.path': function (newVal, oldVal) {
          this.getPath(newVal)
        }
      },
      methods: {
        clkTag (i) {
          let path = this.$route.path
          this.getPath(path)
        },
        getPath (path) {
          if (path.indexOf('/dec') > -1) {
            this.selected = 0
          } else if (path.indexOf('/user') > -1) {
            this.selected = 1
          }
        }
      }
    }

    必须要加上路由监听,不然切换的时候会有bug

  • 相关阅读:
    原型模式
    windows下Redis安装及利用java操作Redis
    redis笔记
    STS 安装SVN插件
    java 操作MongoDB简易工具类
    Mysql 单表数据量过大移除数据
    Mysql 提示拷贝效率
    JS 图片显示一部分 小计
    FashJson转换
    WIndow MongoDb安装和启动
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/9699575.html
Copyright © 2011-2022 走看看