文章目錄
- vue路由傳參方式
- 一、頁面重繪資料會丟失
- 方法一：通過路由屬性中的name來確定匹配的路由，通過params來傳遞引數
- *該方法可以隱藏URL后的引數
- 方法二：使用Vue全域API：Vue.observable
- 二、頁面重繪資料不會丟失
- 方法一：使用動態路由傳參，path中攜帶引數id，路由中使用 /:id 系結對應引數
- 方法二：使用path匹配路由，通過query傳參
vue路由傳參方式
專案中很多情況下都需要進行路由之間的傳值，想過很多種方式
sessionstorage/localstorage/cookie 進行離線快取存盤也可以，用vuex也可以，不過有些大材小用吧，不管怎么說因場景而異
一、頁面重繪資料會丟失
使用場景：
頁面跳轉帶id過去
方法一：通過路由屬性中的name來確定匹配的路由，通過params來傳遞引數
通過路由屬性中的name來確定匹配的路由，通過params來傳遞引數
eg:點擊當前頁的某個按鈕跳轉到另外一個頁面去，并將某個值帶過去
<div class="examine" @click="insurance(2)">查看詳情</div>
// 父組件傳值：將id帶過去
methods：{
insurance(id) {
this.$router.push({
name: 'particulars',
params: {
id: id
}
})
}
// 路由配置
{
path: '/particulars',
name: 'particulars',
component: particulars
}
// 子組件：獲取引數id
this.$route.params.id
溫馨提示：該方法重繪頁面資料會丟失
*該方法可以隱藏URL后的引數
方法二：使用Vue全域API：Vue.observable
使用Vue全域API：Vue.observable
詳細教程看如下博客：Vue.observable使用教程
溫馨提示：該方法重繪頁面資料會丟失
二、頁面重繪資料不會丟失
方法一：使用動態路由傳參，path中攜帶引數id，路由中使用 /:id 系結對應引數
使用動態路由傳參，path中攜帶引數id，路由中使用 /:id 系結對應引數
methods：{
insurance(id) {
//直接呼叫$router.push 實作攜帶引數的跳轉
this.$router.push({
path: `/particulars/${id}`,
})
}
// 對應路由配置
{
path: '/particulars/:id',
name: 'particulars',
component: particulars
}
// 子組件中獲取引數
this.$route.params.id
溫馨提示：該方法重繪頁面資料不會丟失
方法二：使用path匹配路由，通過query傳參
使用path匹配路由，通過query傳參
url路徑中攜帶：
methods：{
insurance(id) {
this.$router.push({
path: '/particulars',
query: {
id: id
}
})
}
{
path: '/particulars',
name: 'particulars',
component: particulars
}
// 子組件獲取引數
this.$route.query.id
溫馨提示：該方法重繪頁面資料不會丟失
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/296969.html
標籤：其他