• vue 使用:class切换高亮 点击路由跳转 上个组件的点击事件保存的参数 在下一次重复进入这个组件的时候 默认值都已经还原了 得通过路由跳转的时候 把上个组件的状态通过路由保存下来 通过下一次进入这个组件的时候 获取路由 渲染当前页面的:class 进行高亮


    第2种方式 通过组件库属性直接操作
          <div class="nav">
            <router-link
              :to="item.path"
              v-for="(item, index) in navData"
              :key="index"
            >{{ item.name }}11</router-link>
          </div>
    
        .router-link-active {
          background-color: rgba(68, 142, 246, 1);
          color: #ffffff;
        }
    第1种方式
    <template> <div class="header"> <div class="box"></div> <div class="content"> <router-link to="/home1" active-class="active" ><span>博之亿</span></router-link> <div class="nav"> <ul> <!-- @click="$router.push({ path: item.path }), (active = index)" --> <!-- :class="{ nav_index: active === index }" --> <!-- 给当前li加样式 给其他li去样式--> <li v-for="(item, index) in navData" :key="item.name" @click="test(item, index)" :class="{ nav_index: active == item.name }" > {{ item.name }} </li> </ul> </div> </div> </div> </template> <script> export default { data () { return { navData: [ { name: "首页1", path: "/home1" }, { name: "人才网校", path: "/home2" }, { name: "商务合作", path: "/home3" }, { name: "关于我们", path: "/home4" }, { name: "新闻中心", path: "/home5" }, { name: "招贤纳士", path: "/home6" }, ], //默认渲染第1个 active: "首页1", }; }, watch: { "$route.path": { handler(val) { console.log(this.$route.query.name,"菜单:", val); // this.selectTag = val; //val是路由跳转的path this.active = this.$route.query.name }, immediate: true //立即执行 } }, methods: { test(item, index){ this.$router.push({ path: item.path, query: {name: item.name}}); var obj = JSON.stringify(item.name) let objClone = JSON.parse(obj) this.active = objClone console.log(this.active,"我正在测试 active",index,"11",this.active == index,"22",item.name) } } }; </script> <style lang="less"> .header { .nav { float: right; ul { 600px; height: 80px; line-height: 88px; margin: 0 auto; font-size: 18px; display: flex; justify-content: space-between; li { 100px; height: 80px; float: left; text-align: center; line-height: 80px; font-size: 18px; color: #000; cursor: pointer; // background: #d14e4e; } .nav_index { 100px; height: 80px; background-color: rgba(68, 142, 246, 1); color: #ffffff; } } } } </style>
  • 相关阅读:
    Mybatis-plus学习笔记(一)
    Mysql基础(四)分组查询及连接查询
    Mysql 基础(三)排序查询及常用函数
    CyclicBarrier 使用详解
    countDownLatch
    pom所有依赖version红色但是不影响运行
    iText5实现Java生成PDF文件完整版
    【Maven】---Nexus私服配置Setting和Pom
    引用、指针、const、define、static、sizeof、左值右值
    事物隔离级别、MVCC以及数据库中常见锁介绍
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/15304831.html
Copyright © 2020-2023  润新知