vue路由傳參的三基本方式


場景:點擊當前頁的某個按鈕跳轉到另外一個頁面去,並將某個值帶過去

三種基本方式:

1、頁面刷新數據不會丟失

methods:{ insurance(id) { //直接調用$router.push 實現攜帶參數的跳轉
        this.$router.push({ path: `/particulars/${id}`, }) }

需要對應路由配置如下:需要在path中添加/:id來對應 $router.push 中path攜帶的參數。在子組件中可以使用來獲取傳遞的參數值

 { path: '/particulars/:id', name: 'particulars', component: particulars }

另外頁面獲取參數如下:

this.$route.params.id

2、頁面刷新數據會丟失(可以在路由的path里加參數,加上參數以后刷新頁面數據就不會丟了)

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

methods:{ insurance(id) { this.$router.push({ name: 'particulars', params: { id: id } }) }

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

{ path: '/particulars', name: 'particulars', component: particulars }

子組件中: 這樣來獲取參數:

this.$route.params.id

3、第三種方法:使用path來匹配路由,然后通過query來傳遞參數,這種情況下 query傳遞的參數會顯示在url后面?id=?

methods:{ insurance(id) { this.$router.push({ path: '/particulars', query: { id: id } }) }

對應路由配置:

{ path: '/particulars', name: 'particulars', component: particulars }

對應子組件: 這樣來獲取參數:

this.$route.query.id

 

 

項目中很多情況下都需要進行路由之間的傳值,還有很多種方式:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM