vue-router 中的query與params的坑

下面有提到在什麼樣子的路由的情況下必須使用params還是query。我想你一定也想知道。爲什麼我用其他的就不行了。因爲會出錯的。我把每一種組合的情況都寫了一邊。並且觀看了結果。你也可以進行實驗檢測。

關於<router-link>的使用情況是與下面一樣的。所以就不在寫標籤的內容了

    路由的設置
    {
      path: '/edit',
      name: 'edit',
      component: () => import(/* webpackChunkName: "about" */ '@/views/Edit.vue')
    }
    如果你這樣設置上面的路由 下面必須配置使用 query 傳參（不需要關心是name 還是 path）  刷新刷新參數也在
    //路由跳轉代碼
    this.$router.push({
         name:'edit', 使用的是name  頁面跳轉成功  參數傳遞成功  刷新頁面參數也在
         query:{
              id:scope.id
         }
    })  
    this.$router.push({
         path:'/edit', 使用的是path  頁面跳轉成功  參數傳遞成功  刷新頁面參數也在
         query:{
              id:scope.id
         }
    }) 
   路由跳轉後的url的存在方式是:  http://localhost:8081/user/edit?id=97   用?號傳遞參數

//-------------------------------------分割線---------------------------------------------

   路由的設置
    {
      path: 'edit/:id',
      name: 'edit',
      component: () => import(/* webpackChunkName: "about" */ '@/views/Edit.vue')
    }
     如果你這樣設置上面的路由 下面必須使用 params 傳參  區別來了 name 與 path 是不相同的！！ 
    //路由跳轉代碼  
    this.$router.push({
         name:'edit', 使用的是name   頁面跳轉成功  參數傳遞成功  刷新頁面參數也在
         params:{
              id:scope.id
         }
     }) 
    this.$router.push({
         path:'/edit', 使用的是path   頁面跳轉失敗！ 參數傳遞失敗！ 頁面刷新參數不存在！
         params:{
              id:scope.id
          }
    }) 
   但是如果我們使用下面這樣的方式   對比一下由上面不同大的是 path中增加了參數傳遞 而非是在params中！！！！
   this.$router.push({
         path:'/edit/12', 使用的是path  頁面跳轉成功  參數傳遞成功  刷新頁面參數也在
         params:{
              id:scope.id
          }
    }) 
    一個是在this.$router中 path   一個是在路由中設置 path 。而此時有使用的是params,params說的就是在url上添參數。但是實現方式是通過path來實現的。
    通過最後一個path:'/edit/12'就說明了問題。也告訴了我們如果非要使用這個方法。如何處理也就知道了。直接在path上傳遞參數
      this.$router.push({
         path:`/edit/${id}`, 這樣參數參數  id 是活的 同時不要忘記前提是路由的配置
    })