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

今天在做项目时遇到一个路由传参问题，跳转页面时，通过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}}); // path和params不可以一起用
this.$route.params.serverid

 上面解决问题的方式时比较愚蠢的，因为即使将参数置空去调接口了，但是参数还是显示在路径中，于是我采用了刷新页面就失去参数的传参方式，这样刷新页面后参数就置空了

this.$router.push({name:'list',params:{serverid:this.id,labelid:newArr,labelArr:this.labelArr}})

在list页面中：

activated(){
      
      this.form.labelMap = this.$route.params.labelid?this.$route.params.labelid:[]
      this.form.serviceId = this.$route.params.serverid?this.$route.params.serverid:''
      this.labelArr = []
      this.getAlllabel()
      this.servicelist(true)
   },

methods:{
    activated(){
      
      this.form.labelMap = this.$route.params.labelid?this.$route.params.labelid:[]  // 这样当刷新页面时，参数丢失，将参数设为空
      this.form.serviceId = this.$route.params.serverid?this.$route.params.serverid:''
      this.labelArr = []
      this.getAlllabel()
      this.servicelist(true)
   },

methods:{　　
    async getAlllabel(){
        const {data} = await getAlllabel()
        this.labelArr = data
        let array = []
        this.orderLabelArr.map(function(item) {
        array.push(
            Object.assign({},item,{isSelectList:[]})
        )
    })
        // this.orderLabelArr = array 
        this.labelArr = this.$route.params.labelArr?this.$route.params.labelArr:array// 这样当刷新页面时，参数丢失，将参数设为从接口拿到的数据

}, } }