vue router跳转统一页面不同传参页面不刷新

router跳转问题

vue router跳转统一页面不同传参页面不刷新

项目场景：

可复用页面只有接收参数不一致，数据格式一致

问题描述：

不同参数，同一个页面，数据不刷新，只有第一次点击刷新页面，后面点击页面不刷新，

 aboutus(val) {
        let keys = '';
        if (val == 1) {
          keys = 'exemption';
        } else if (val == 2) {
          keys = 'software_license';
        } else if (val == 3) {
          keys = 'privacy_info';
        } else if (val == 4) {
          keys = 'about_us';
        }
        console.log(keys)
        this.$router.push({
          path:'aboutus',
          query:{
            key:keys
          }
        })
      },

原因分析：

用watch监听方式，监听接收到的参数，我这里用的是‘key’，你们用的名字是啥就监听啥就可以

解决方案：

 watch: {
        $route(to, from) {
       	//监听路由参数变化
          if (this.$route.query.key) {
           // 参数变化 复用 mounted里面的方法
            this.key = this.$route.query.key;
            this.getSystemParam();
          }
        },
      },
     mounted() {
        this.key = this.$route.query.key;
        this.getSystemParam();
      },
       methods: {
      getSystemParam(){
         console.log(this.$route.query.key)
        let data = {};
        let params = {};
        params.key =this.key;
        data.params = params;
        getSystemParam(data).then(res=>{
          if(res.data.status){
            this.systemParam=res.data.data
          }
        })

用上监听完美解决