vue路由傳參的三基本方式

2022-09-02 17:06:10 字數 896 閱讀 5637

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

三種基本方式:

1、頁面重新整理資料不會丟失

methods:`,

})}

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

另外頁面獲取引數如下:

this.$route.params.id

2、頁面重新整理資料會丟失(可以在路由的path裡加引數,加上引數以後重新整理頁面資料就不會丟了)

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

methods:

})}

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

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

this.$route.params.id

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

methods:

})}

對應路由配置:

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

this.$route.query.id

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

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

vue路由傳參的三種基本方式

this.router.push 路由配置 在home元件中獲取引數值 this.route.params.id 複製 通過name來匹配路由,通過param來傳遞引數 this.router.push 用params傳遞引數,不使用 id home元件中獲取引數 this.route.params...

vue路由傳參的三種基本方式

現有如下場景,點選父元件的li元素跳轉到子元件中,並攜帶引數,便於子元件獲取資料。父元件中 for article in articles click getdescribe article.id methods getdescribe id 方案一,需要對應路由配置如下 很顯然,需要在path中新...

vue路由傳參的三種基本方式

現有如下場景,點選父元件的li元素跳轉到子元件中,並攜帶引數,便於子元件獲取資料。父元件中 li v for article in articles click getdescribe article.id getdescribe id 方案一,需要對應路由配置如下 很顯然,需要在path中新增 i...