vue-router 路由傳參，刷新頁面參數丟失

常見場景：點擊列表的詳情，跳轉到詳情內頁，在內頁根據傳遞的參數獲取詳情數據。

 

路由傳參一般有如下幾種方式，下面主要介編程式導航 router.push 的傳參方式：

方法一：通過 params 傳參

路由配置如下：

{ 
    path: '/detail/:id',  //若id后面加?代表這個參數是可選的
    name: 'detail', 
    component: Detail 
}

• 通過 $router.push 中 path 攜帶參數的方式

// 列表中的傳參
goDetail(row) {
    this.$router.push({
        path: `/detail/${row.id}`
    })
}

// 詳情頁獲取參數
this.$route.params.id

• 通過 $router.push 的 params 傳參

// 列表頁傳參
goDetail(row) {
    this.$router.push({
        name: 'detail',
        params: {
            id: row.id
        }
    })
}

// 詳情頁獲取
this.$route.params.id

注：這種方式的傳參，路徑用 name，路徑用 name，路徑用 name , 用 path 會獲取不到；如果在路由配置中沒有添加 /:id 即 path: 'detail'，url 中不會顯示 id，在詳情頁還是可以拿到參數 id，但刷新后參數丟失。

• 以上這兩種方式，傳遞的參數 id 會在 url 后面顯示，如圖：

傳遞的參數會暴露在網址中。

如果在路由中設置了params參數 /:id，但是在跳轉的時候沒有傳遞參數，會導致頁面沒有內容或跳轉失敗，可在后面加 ？代表這個參數是可選的，即 /:id?

 

方法二：通過 query 傳參

// 路由配置
{ 
    path: '/detail', 
    name: 'detail', 
    component: Detail 
}

// 列表頁
goDetail(row) {
    this.$router.push({
        path: '/detail',
        query: {
            id: row.id
        }
    })
}

// 詳情頁
this.$route.query.id

注：這種方式傳遞的參數會在地址欄的 url 后面顯示 ?id=?，類似於 get 傳參；query 必須配合 path 來傳參。

 

傳遞的參數是對象或數組

還有一種情況就是，如果通過 query 的方式傳遞對象或數組，在地址欄中會被強制轉換成 [object Object]，刷新后也獲取不到對象值。

此時可以通過 JSON.stringify() 方法將要傳遞的參數轉換為字符串傳遞，在詳情頁再通過 JSON.parse() 轉換成對象。

let parObj = JSON.stringify(obj)
this.$router.push({
    path: '/detail',
    query: {
        'obj': parObj
    }
})

// 詳情頁
JSON.parse(this.$route.query.obj)

這個方法雖然可以傳遞對象，若數據少還好，數據多的話地址欄就很長了

 

注意：在所有的子組件中獲取路由參數是 $route 不是 $router

以上 params 和 query 傳參方式對比：

• • 通過 $router.push 的 params + name 傳參，若路由中沒有設置params參數，參數不會拼接在路由后面，但是頁面刷新參數會丟失。

  • 通過 $router.push 中 path 攜帶參數或通過 query 傳參，參數會拼接在地址后面，會暴露信息。

 

方法三：使用 props 配合組件路由解耦

// 路由配置
{ 
    path: '/detail/:id',
    name: 'detail', 
    component: Detail,
    props: true // 如果props設置為true，$route.params將被設置為組件屬性
}

// 列表頁
goDetail(row) {
    this.$router.push({
        path: '/detail',
        query: {
            id: row.id
        }
    })
}

// 詳情頁
export default {
    props: {
        // 將路由中傳遞的參數id解耦到組件的props屬性上
        id: String
    },
    mounted: {
        console.log(this.id)
    }
}

 

詳見：動態路由匹配    路由組件傳參

此外，還可以通過把參數存在 sessionStorage 或 localStorage 中來解決頁面刷新參數丟失的問題，具體結合實際項目即可。