路由傳參的三種方法

2022-10-11 11:30:09 字數 1035 閱讀 4721

專案中很多情況下都需要進行路由之間的傳值,想過很多種方式

sessionstorage/localstorage/cookie 進行離線快取儲存也可以,用vuex也可以,不過有些大材小用吧,不管怎麼說因場景而異

下面我來說下vue自帶的路由傳參的三種基本方式

先有如下場景 點選當前頁的某個按鈕跳轉到另外乙個頁面去,並將某個值帶過去

第一種方法 頁面重新整理資料不會丟失

methods:`,})}

需要對應路由配置如下:

可以看出需要在path中新增/:id來對應 $router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值

另外頁面獲取引數如下

this.$route.params.id

第二種方法 頁面重新整理資料會丟失

通過路由屬性中的name來確定匹配的路由,通過params來傳遞引數。

methods:})}

對應路由配置: 注意這裡不能使用:/id來傳遞引數了,因為元件中,已經使用params來攜帶引數了。

子元件中: 這樣來獲取引數

this.$route.params.id

第三種方法

使用path來匹配路由,然後通過query來傳遞引數

這種情況下 query傳遞的引數會顯示在url後面?id=?

methods:})}

對應路由配置:

對應子元件: 這樣來獲取引數

this.$route.query.id

特別注意哦,

元件中 獲取引數的時候是

router 這很重要~~~

Vue router路由傳參三種方法及區別

先有如下場景 點選當前頁的某個按鈕跳轉到另外乙個頁面去,並將某個值帶過去 el button type primary click handleclick 2 el button 1 第一種方法 拼接方式 methods 對應路由配置 獲取引數方式 this.route.params.id 這種方式...

Vue 路由傳參的三種常用方法

在實現vue多介面應用中,我們經常需要在頁面跳轉時講數值傳遞到另乙個頁面,那麼下面就來介紹下實現路由傳參的三種方法。傳遞方法 id為引數 this.router.push 接收方法 this.route.params.id傳遞方法 this.router.push 接收方法 this.route.p...

react router路由傳參三種方式

react router路由傳參三種方式 通過萬用字元傳參 query傳參和state傳參。1.萬用字元傳參 route定義方式 link元件 萬用字元引數獲取 this.props.match.params.name 優點 簡單快捷,並且,在重新整理頁面的時候,引數不會丟失。缺點 只能傳字串,並且...