vue router-link 怎样实现 从本页面跳转到本页面 仅传的参数不同

Question

一个类似于qq个人信息信息中心，下面有访客记录，点击访客记录跳转到访客的个人信息中心，页面仍然是本页面，仅？后面跟的id不一样，该怎样实现啊？

<router-link v-for="(hd,index) in hdinfo"
                       :key="index"
                       :to="{path:'/friendinfo',query:{id:hd.uid}}"
                       tag='li'>
            <span>{{hd.lookname}}</span>
            <i>查看了名片</i>

            <em>{{hd.looktime}} ></em>

          </router-link>

当前页面为：/index/id_card.html#/friendinfo?id=1021
从当前页想跳到：/index/id_card.html#/friendinfo?id=1020

Answer 1

不用router-link 直接用@click点击事件，把hd.uid带过去，
然后js里
this.$router.push({name: '路径名', params: {id: id}})

Answer 2

:to="`/friendinfo?id=${hd.uid}`"

watch $route 或者 beforeRouteUpdate 请求数据

Answer 3

<li v-for="(hd,index) in hdinfo"
                :key="index"
                @click="hdhref(hd.uid)">
              <span>{{hd.lookname}}</span>
              <i>查看了名片</i>
              <em>{{hd.looktime}} ></em>
            </li>

     // 互动点击跳转事件
        hdhref(uid) {
          this.$router.push({
            path: `/friendinfo/${uid}`
          });
        },

//此部分暂不需要
watch: {
    "$route": {
      handler(val) {
        // console.log(val)
        let str = val.params.id
        this.sid = str.split('_')[0];
        // console.log(this.sid,'sid')
        this.applyid = str.split('_')[1];
        // console.log(this.applyid,'applyid')
        this.gethimInfo();
      },
      immediate: true
    }
  },