vue 頁面跳轉傳參

頁面之間的跳轉傳參，正常前端js里寫 window.location.href="xxxxx?id=1" 就可以了；
但是vue不一樣 需要操作的是路由history，需要用到 VueRouter,

示例：

常用的場景是：列表頁點擊“查看”按鈕，跳轉到詳情頁。
在列表頁（list.vue）按鈕點擊事件里寫上

detail(row) {
      this.$router.push({ path: "detail", query: { id: row.id } });
},

運行時瀏覽器地址欄展示：
http://localhost:8080/#/orders/detail?id=31

在詳情頁(detail.vue)里寫上

 let id = Number(this.$route.query.id);

即可獲取到參數id了。

解析

先看看 $router 和$route是什么,在vscode f12后
看到

declare module "vue/types/vue" {
  interface Vue {
    $router: VueRouter;
    $route: Route;
  }
}

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。
VueRouter官網 傳送門

route是一個跳轉的路由對象，每一個路由都會有一個route對象，是一個局部的對象，可以獲取對應的name,path,params,query等

其中

• params
  {}對象，包含路由中的動態片段和全匹配片段的鍵值對 用來實現 /order.detail/1
• query
  {}對象，包含路由中查詢參數的鍵值對。 用來實現 /order/detail?id=1