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// 這樣當刷新頁面時，參數丟失，將參數設為從接口拿到的數據

}, } }