項目中很多情況下都需要進行路由之間的傳值政钟,想過很多種方式
sessionstorage/localstorage/cookie 進行離線緩存存儲也可以断傲,用vuex也可以房官,不過有些大材小用吧镀脂,不管怎么說因場景而異
下面我來說下vue自帶的路由傳參的三種基本方式
先有如下場景 點擊當前頁的某個按鈕跳轉到另外一個頁面去徐矩,并將某個值帶過去
<div class="examine" @click="insurance(2)">查看詳情</div>
第一種方法 頁面刷新數據不會丟失
methods:{
insurance(id) {
//直接調用$router.push 實現攜帶參數的跳轉
this.$router.push({
path: `/particulars/${id}`,
})
}
需要對應路由配置如下:
{
path: '/particulars/:id',
name: 'particulars',
component: particulars
}
可以看出需要在path中添加/:id來對應 $router.push 中path攜帶的參數。在子組件中可以使用來獲取傳遞的參數值
另外頁面獲取參數如下
this.$route.params.id
第二種方法 頁面刷新數據會丟失
通過路由屬性中的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
第三種方法
使用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
特別注意哦刺洒,
組件中 獲取參數的時候是router 這很重要~~~