在使用`router.push`進行路由跳轉(zhuǎn)到另一個組件時，可以通過`params`或`query`來傳遞參數(shù)。

1. 使用`params`傳參：

// 在路由跳轉(zhuǎn)時傳遞參數(shù)
router.push({
name: 'targetComponent',
params: {
  paramName: paramValue  // 參數(shù)名和值
}
});
// 在目標組件中通過$route.params獲取參數(shù)值
this.$route.params.paramName

2. 使用`query`傳參：

// 在路由跳轉(zhuǎn)時傳遞參數(shù)
router.push({
name: 'targetComponent',
query: {
  paramName: paramValue  // 參數(shù)名和值
}
});
// 在目標組件中通過$route.query獲取參數(shù)值
this.$route.query.paramName

需要注意的是，`params`傳參會將參數(shù)添加到URL路徑中，而`query`傳參則會將參數(shù)添加到URL的查詢字符串中。根據(jù)具體需求選擇適合的方式進行參數(shù)傳遞。

二者的區(qū)別：

`params`和`query`是Vue Router中用于傳遞參數(shù)的兩種方式，它們有以下區(qū)別：
1. URL形式：
   - `params`傳參：參數(shù)會以占位符的形式添加到URL路徑中，例如：`/targetComponent/:paramName`
   - `query`傳參：參數(shù)會以鍵值對的形式添加到URL的查詢字符串中，例如：`/targetComponent?paramName=paramValue`
2. 參數(shù)的可見性：
   - `params`傳參：參數(shù)會在URL中暴露，可以被查看和修改，適合傳遞敏感數(shù)據(jù)。
   - `query`傳參：參數(shù)在URL中不直接暴露，不會修改URL路徑，適合傳遞非敏感數(shù)據(jù)。
3. 參數(shù)的傳遞方式：
   - `params`傳參：參數(shù)通過路由的`params`屬性進行傳遞，傳遞的參數(shù)是一個對象。
   - `query`傳參：參數(shù)通過路由的`query`屬性進行傳遞，傳遞的參數(shù)是一個鍵值對的對象。
4. 路由配置：
   - `params`傳參：需要在路由配置中定義參數(shù)的名稱，以冒號開頭，例如：`path: '/targetComponent/:paramName'`
   - `query`傳參：不需要在路由配置中定義參數(shù)，可以直接使用。
需要根據(jù)具體的需求選擇適合的方式進行參數(shù)傳遞。如果參數(shù)需要在URL中暴露或需要保留在瀏覽器的歷史記錄中，可以使用`params`傳參；如果參數(shù)是一些臨時的、非敏感的數(shù)據(jù)，可以使用`query`傳參。

注意：如上方舉例，如果paramValue是一個對象，跳轉(zhuǎn)完頁面后，如果進行頁面刷新，會發(fā)現(xiàn)取到的值變成了[object Object]

可以在傳遞參數(shù)時先JSON.stringify，取值時JSON.parse解析

舉例：

// 傳遞時
this.$router.push({
    path: "/screen/project",
    query: {
    paramName: JSON.stringify(this.paramValue)
    }
});
// 接收時
JSON.parse(this.$route.query.paramName);

到此這篇關(guān)于vue router進行路由跳轉(zhuǎn)并攜帶參數(shù)（params/query）的文章就介紹到這了,更多相關(guān)vue router路由跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論