概述

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

路由傳參一般有如下幾種方式，下面主要介程式設計式導航 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引數 /:http://www.cppcns.comid，但是在跳轉的時候沒有傳遞引數，會導致頁面沒有內容或跳轉失敗，可在後面加 ？代表這個引數是可選的，即 /: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: {
        http://www.cppcns.com'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',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程式設計客棧 或 l程式設計客棧ocalStorage 中來解決頁面重新整理引數丟失的問題，具體結合實際專案即可。

以上就是如何處理vue router 路由傳參重新整理頁面引數丟失的詳細內容，更多關於vue的資料請關注我們其它相關文章！