常見場景：點選列表的詳情，跳轉到詳情內頁，在內頁根據傳遞的引數獲取詳情資料。
路由傳參一般有如下幾種方式，下面主要介程式設計式導航 router.push 的傳參方式：
方法一：通過 params 傳參
路由配置如下：
//列表中的傳參
godetail(row) `
})}//
詳情頁獲取引數
this.$route.params.id
//注：這種方式的傳參，路徑用 name，路徑用 name，路徑用 name, 用 path 會獲取不到；如果在路由配置中沒有新增 /:id 即 path: 'detail'，url 中不會顯示 id，在詳情頁還是可以拿到引數 id，但重新整理後引數丟失。列表頁傳參
godetail(row)
})}//
詳情頁獲取
this.$route.params.id
傳遞的引數會暴露在**中。
如果在路由中設定了params引數 /:id，但是在跳轉的時候沒有傳遞引數，會導致頁面沒有內容或跳轉失敗，可在後面加 ？代表這個引數是可選的，即 /:id?
方法二：通過 query 傳參
//注：這種方式傳遞的引數會在位址列的 url 後面顯示 ?id=?，類似於 get 傳參；query 必須配合 path 來傳參。路由配置
//列表頁
godetail(row)
})}//
詳情頁this.$route.query.id
傳遞的引數是物件或陣列
還有一種情況就是，如果通過 query 的方式傳遞物件或陣列，在位址列中會被強制轉換成 [object object]，重新整理後也獲取不到物件值。
此時可以通過 json.stringify() 方法將要傳遞的引數轉換為字串傳遞，在詳情頁再通過 json.parse() 轉換成物件。
let parobj =json.stringify(obj)這個方法雖然可以傳遞物件，若資料少還好，資料多的話位址列就很長了this
.$router.push(
})//
詳情頁json.parse(this.$route.query.obj)
注意：在所有的子元件中獲取路由引數是 $route 不是 $router
以上 params 和 query 傳參方式對比：
方法三：使用 props 配合元件路由解耦
//詳見：動態路由匹配路由元件傳參路由配置
//列表頁
godetail(row)
})}//
詳情頁export default
, mounted:
}
此外，還可以通過把引數存在 sessionstorage 或 localstorage 中來解決頁面重新整理引數丟失的問題，具體結合實際專案即可。
VueRouter 路由傳參
語法 演示 首頁 路由配置 const routes 注釋 id 代表id是乙個變數，值會儲存在元件例項的 route.params上 在元件上取引數的值 let home 演示 methods 路由配置 const routes 注釋 id 代表id是乙個變數，值會儲存在元件例項的 route.p...
vue router路由傳參
vue router路由傳參有兩種方法 1 params傳參 2 query傳參 用params傳參，f5強制重新整理引數會被清空，用query傳參，由於引數適用路徑傳參的所以f5強制重新整理也不會被清空。傳參強烈建議適用string import articleindex from pages t...
vue router 路由傳參
路由傳引數。在很多時候我們需要路由上面傳遞引數，比如新聞列表頁，我們需要傳遞新聞id，給新聞詳細頁。1.新聞列表頁模板 我們訪問 news 001，跳轉到新聞詳細頁，展示001的這條新聞。2.新聞詳細頁元件準備 新聞詳細頁面 route.params.id獲取路由上的引數 在js裡定義路由元件 新聞...