【vue】router.push()从定向router.push() 从当前页面跳转当前页面传递参数刷新页面

需求

1. 从about页面跳转到list页面传递一个分页数据参数，刷新list页面

2.list页面有一个按钮，点击传递参数刷新list页面

处理1

list页面有一个按钮，点击请求接口数据刷新一遍

about页面

<template>
  <div id="first-detail">
    <div class="title">title</div>
    <button @click="clickToList">点击去详情List页面</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 30,
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    clickToList() {
      this.$router.push({
        path: "/list",
        query: {
          num:Math.round(Math.random() * 10)>5? this.num+5: this.num+10
        },
      });
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
</style>
 

list页面

<template>
  <div id="first-detail">
    <button @click="clickRefreshSelf">点击我刷新列表</button>
    <!-- dom反转 -->
    <div class="dom-reverse">
      <div v-for="item in dataNum" :key="item.index">{{ item }}假数据</div>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      dataNum: 40,
    };
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    //模拟接口获取数据
    getList() {
      this.dataNum = this.dataNum > 35 ? this.dataNum + 10 : this.dataNum + 20;
    },
    //点击时候从新刷新所有接口
    clickRefreshSelf() {
      this.getList();
    },
  },
  mounted() {
    this.dataNum = this.$route.query.num ? Number(this.$route.query.num) : 40;
    this.getList()
  },
};
</script>
<style lang="scss" scoped>
.dom-reverse {
  border: 1px solid rebeccapurple;
  display: flex;
  flex-direction: column-reverse;
}
</style>
 

处理2

list页面有一个按钮，点击监听路由和参数变化；

about页面没有变化

list页面监听参数，监听路由

<template>
  <div id="first-detail">
    <!-- 3 <button @click="clickRefreshSelf(num--)">点击我刷新列表</button> -->
    <!--4  如果参数有变化，就不会报错，像上面的num--，如果num不变化，或者两次点击是同一个值，就需要1处理> -->
     <button @click="clickRefreshSelf(num)">点击我刷新列表</button>
    <!-- dom反转 -->
    <div class="dom-reverse">
      <div v-for="item in dataNum" :key="item.index">{{ item }}假数据</div>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      dataNum: 10,
      num:90
    };
  },
  watch: {
    $route(oldVal, newVal) {
      console.log(oldVal, newVal);
      this.dataNum = Number(this.$route.query.num);
    },
     //2也就是dataNum没有变化 ，就不用再走了
    dataNum(oldVal, newVal) {
      console.log(oldVal, newVal);
      this.getList( this.dataNum);
    },
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    //模拟接口获取数据
    getList(kk) {
      this.dataNum = kk
    },
    clickRefreshSelf(num) {
      console.log(Number(this.$route.query.num),num);
      //1 if判断 如果当前传进的参数和路由的参数一样，就不用往下，会报错
      if(Number(this.$route.query.num)===num){
        return ;
      }
     this.$router.push({
       path: '/list',
       query:{
         num : num
       }
     })
    },
  },
  mounted() {
    this.dataNum = this.$route.query.num ? Number(this.$route.query.num) : 40;
    this.getList( this.dataNum)
  },
};
</script>
<style lang="scss" scoped>
.dom-reverse {
  border: 1px solid rebeccapurple;
  display: flex;
  flex-direction: column-reverse;
}
</style>