vue路由传参，刷新之后参数还在的问题

Posted 2021-05-20 DNFYI

今天在做项目时遇到一个路由传参问题，跳转页面时，通过query传参了；跳转的目标页面也通过this.$route.query 拿到值了，然后通过传过来的参数去请求接口；但是当刷新页面时，我希望参数不要在请求接口的参数中

一开始的解决方法：用watch来监听路由的变化，如果是从/home跳转过来的，请求接口时就把参数设为上个页面传过来的参数，如果是执行刷新操作，就将参数设为空

moubted(){
    this.servicelist(true) 
},   
watch: {
      $route(to,from){       
           console.log(to,\'---\',from,\'tot11\')
           if(from.path == \'/home\'){
            this.form.list = this.$route.query.list
             this.form.id = this.$route.query.id
           }else{
             this.form.list= []
            this.form.id= \'\'
           }
        this.servicelist(true)   
      }
  },

但是这样有一个问题：第一次带参跳转页面时，路由并没有发生变化，也没有进行监听；返回上一个页面后，再跳转才会监听并打印路由to,from，但是每一次的跳转也是需要进行带参掉接口的

修改如下：使用beforeRouteEnter路由守卫来进行判断，每次进入这个页面的时候都会打印路由参数

moubted(){
    this.servicelist(true) 
}, 

beforeRouteEnter (to, from, next) {
    console.log(to,\'to009\')
    console.log(from,\'from009\')
    next(vm=>{
      if(from.path == \'/home\'){
            vm.form.list= vm.$route.query.list
            vm.form.id= Number(vm.$route.query.id)
          }else{
            vm.form.list= []
            vm.form.id= \'\'
          }
          
            vm.servicelist(true)
       
    })
  },

又出现一个问题：当我每次跳转的时候，他会先执行mouted生命周期里面的方法去调接口（此时参数为空），然后再调一次带参的接口，这时页面显示的还是不带参的数据，虽然不带参的接口是先调的，但可能是数据比较多，后面才赋值上来，所以页面显示的还是不带参的数据

解决：将beforeRouteEnter 里面的方法延迟调用

beforeRouteEnter (to, from, next) {
    console.log(to,\'to009\')
    console.log(from,\'from009\')
    next(vm=>{
      if(from.path == \'/home\'){
            vm.form.list= vm.$route.query.list
            vm.form.id= Number(vm.$route.query.id)
          }else{
            vm.form.list= []
            vm.form.id= \'\'
          }

　　　　setTimeout(()=>{
            vm.servicelist(true)
          },100)

 }) },

解决!

仅此记录下工作中遇到的问题，上述问题如果又更好的解决办法，请各位大佬告知

vue的另一种传参方式：这种方式传参，刷新页面参数也不会丢失

routes: [
    {
      path: \'/list/:serverid\',  // 要在路径里面配置动态参数，否则刷新页面，参数会丢失
      name: \'list\'
    }
]
 
1
this.$router.push({name:\'list\', params:{serverid: id}});
this.$route.params.serverid