html+vue 实现 A页面带参的跳转到B页面，B页面对应的内容添加样式，点击的时候也添加样式

本文链接：https://blog.youkuaiyun.com/weixin_48372590/article/details/124165941

本文介绍了如何使用 Vue.js 和 HTML 实现A页面带参数跳转到B页面，并在B页面根据参数动态添加样式。通过在B页面的created钩子中解析URL参数，并设置动态类`:class="cursorIndex==index? 'tohrefcolor' : ''"`，实现了页面加载和点击事件时的样式变化。作者分享了在实现过程中遇到的问题及解决办法，即修改条件判断语句为`cursorIndex==index`来正确匹配索引并添加样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我想要的效果：

A页面的代码：加链接，拼接参数，key从0开始

      <div class="content">
            <a  href="./posts.html#?key=0" class="item">
              <div class="left">
                <div class="title">xxx项目部</div>
                <div  class="look">查看岗位 <img src="./image/join-us/蒙版组 63.png" alt=""></div>
              </div>
              <div class="right"><img src="./image/join-us/蒙版组 61.png" alt=""></div>
            </a>
            <a  href="./posts.html#?key=1" class="item">
              <div class="left">
                <div class="title">xxx项目部</div>
                <div class="look">查看岗位 <img src="./image/join-us/蒙版组 63.png" alt=""></div>
              </div>
              <div class="right"><img src="./image/join-us/蒙版组 78.png" alt=""></div>
            </a>
            <a  href="./posts.html#?key=2" class="item">
              <div class="left">
                <div class="title">xxx项目部</div>
                <div class="look">查看岗位 <img src="./image/join-us/蒙版组 63.png" alt=""></div>
              </div>
              <div class="right"><img src="./image/join-us/蒙版组 71.png" alt=""></div>
            </a>
            <a  href="./posts.html#?key=3" class="item">
              <div class="left">
                <div class="title">总经办</div>
                <div class="look">查看岗位 <img src="./image/join-us/蒙版组 63.png" alt=""></div>
                </div>
              <div class="right"><img src="./image/join-us/蒙版组 60.png" alt=""></div>
            </a>
            <a  href="./posts.html#?key=4" class="item">
              <div class="left">
                <div class="title">信息科技部</div>
                <div class="look">查看岗位 <img src="./image/join-us/蒙版组 63.png" alt=""></div>
              </div>
              <div class="right"><img src="./image/join-us/蒙版组 66.png" alt=""></div>
            </a>
            <a  href="./posts.html#?key=5" class="item">
              <div class="left">
                <div class="title">人事行政部</div>
                <div class="look">查看岗位 <img src="./image/join-us/蒙版组 63.png" alt=""></div>
              </div>
              <div class="right"><img src="./image/join-us/蒙版组 73.png" alt=""></div>
            </a>
            <a  href="./posts.html#?key=6" class="item">
              <div class="left">
                <div class="title">财务部</div>
                <div class="look">查看岗位 <img src="./image/join-us/蒙版组 63.png" alt=""></div>
              </div>
              <div class="right"><img src="./image/join-us/蒙版组 77.png" alt=""></div>
            </a>
            <a  href="./posts.html#?key=7" class="item">
              <div class="left">
                <div class="title">企划部</div>
                <div class="look">查看岗位 <img src="./image/join-us/蒙版组 63.png" alt=""></div>
              </div>
              <div class="right"><img src="./image/join-us/蒙版组 164.png" alt=""></div>
            </a>
            <a  href="./posts.html#?key=8" class="item">
              <div class="left">
                <div class="title">运营管理部</div>
                <div class="look">查看岗位 <img src="./image/join-us/蒙版组 63.png" alt=""></div>
              </div>
              <div class="right"><img src="./image/join-us/蒙版组 69.png" alt=""></div>
            </a>
          </div>

B页面的代码：

B.1 html部分：

      <div class="keyword yx-container--1200 view">
             <ul>
          <li>全部</li>
          <li v-for="(item,index) in departmentList" :class="cursorIndex==index? 'tohrefcolor' : ''"  @click="btn_click(index,item)" :key="index" >{{item.department}}</li>
        </ul>     
      </div>

B.2 vue部分：

<script>
  new Vue({
    el: '#app',
    data() {
      return {     
      // 部门
        departmentList:[
          {
            department:"xxx项目部"
          },    
          {
            department:"xxx项目部"
          },
          {
            department:"xxx项目部"
          },
          {
            department:"总经办"
          },    
          {
            department:"信息科技部"
          },
          {
            department:"人事行政部"
          },    
          {
            department:"财务部"
          },
          {
            department:"企划部"
          },    
          {
            department:"运营管理部"
          },
        ],
        cursorIndex:"",//当前部门对应的索引值，默认为空
      }
    },
  created(){
console.log(window.location.hash.split("="),"当前路径后面的参数");// window.location.hash是   #?key=1 ， split  用 = 号分成了两份  ['#?key', '7']
if(window.location.hash){
  // this.temp=window.location.hash.split("=")[1]
  this.cursorIndex=window.location.hash.split("=")[1]
}
    },
    methods: {
      // 点击的时候索引变
      btn_click:function(index){
        this.cursorIndex=index
      }
  }
  })
</script>

总结：

给div添加动态的类 :class="cursorIndex==index? 'tohrefcolor' : ''" ，初始值的 cursorIndex 是一个空值，在进入页面的时候，created 用window.location获取当前的url，里面的hash是参数，然后用 split('=')将这个参数分成两部分，后面的数字是我们要的，也就是window.location.hash.split("=")[1] ，然后让 cursorIndex 等于这个数，这样就可以在页面一进来的时候，cursorIndex有值，html里面检测到 cursorIndex==index 就会给这个索引添加上样式，然后html添加点击事件，让点击的时候cursorIndex=index 添加上样式，这样就做好了。

踩坑：

这个地方我一开始踩错坑，页面进来的时候并没有添加样式，我就在html里面用插值写上{{cursorIndex}}{{index}}，事实上是有相同的值的，然后我把cursorIndex===index 改成 cursorIndex==index 就能实现我想要的效果了

         <li v-for="(item,index) in departmentList" :class="cursorIndex===index? 'tohrefcolor' : ''"  @click="btn_click(index,item)" :key="index" >{{cursorIndex}}、{{index}}{{item.department}}</li>