跳转路由的钩子函数和JSON.stringfy()的应用

问题：首先是我遇到了一个重定向的问题：

报错信息如下：

解决过程：首先我们需要明确这个错误是由于重定向引发的问题

错误代码：表单发生变化的时候路由更新。

@Watch('form', {deep: true})
  setUrlParams(val) {
    const route = this.$route;
    this.$router.replace({
      path: route.fullPath,
      query: {
        ...(route.query || {}),
        ...val,        
      }
    })
  }

 改进思路：需要加一个判断,判断传过来的参数和原来的参数是否一致

const query={}
    for(let k in this.$route.query){
      if(this.$route.query[k]==null){
        query[k]=this.$route.query[k]
      }else{
        query[k]=Number(this.$route.query[k])
      }   
    }
    if(JSON.stringify(query)!=JSON.stringify(val)){
      if(JSON.stringify(query)== '{}'){
        this.$router.replace({
          path:this.$route.fullPath,
          query:{
            ...val
          }
        })
       }else{
        this.$router.replace({
          path:this.$route.fullPath,
          query:{
            ...(this.$route.query||{}),
            ...val
          }
        })
       }
    }
  }

⚠️：这里面有一点需要注意：query 是字符串，但是val被处理成number了，

如果我们直接把他们进行对比，他们永远不相等，

所以这个方法遍历了query 把它的值转成number的，然后再通过JSON.stringify转化进行对比！

（JSON.stringify() 用法和JSON.prase())

二、改进方法（应用三目运算符）

@Watch('form', {deep: true})
  setUrlParams(val) {
    const query = this.$route.query;
    const {app, platform, published} = query || {};
    const formatQuery = {...query,
       app: app ? Number(app) : null,
       platform: platform ? Number(platform) : null,
       published: published ? Number(published) : null
    };
    if(JSON.stringify(formatQuery)!=JSON.stringify(val))
    this.$router.replace({
      path:this.$route.fullPath,
      query:{
        ...(this.$route.query||{}),
        ...val
      }
    })
  }

这样比较代码简单一点！