路由跳轉(zhuǎn)的同時傳遞參數(shù)是比較常見的,傳參的方式有三種:
1. 通過動態(tài)路由方式
//路由配置文件中 配置動態(tài)路由
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
//跳轉(zhuǎn)時頁面
var id = 1;
this.$router.push('/detail/' + id)
//跳轉(zhuǎn)后頁面獲取參數(shù)
this.$route.params.id
2. 通過query屬性傳值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳轉(zhuǎn)時頁面
this.$router.push({
path: '/detail',
query: {
name: '張三'默蚌,
id: 1,
}
})
//跳轉(zhuǎn)后頁面獲取參數(shù)對象
this.$route.query
3. 通過params屬性傳值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳轉(zhuǎn)時頁面
this.$router.push({
name: 'Detail',
params: {
name: '張三'鸭限,
id: 1,
}
})
//跳轉(zhuǎn)后頁面獲取參數(shù)對象
this.$route.params
注意:1.動態(tài)路由和query屬性傳值 頁面刷新參數(shù)不會丟失党饮, params會丟失 2.動態(tài)路由一般用來傳一個參數(shù)時居多(如詳情頁的id), query悠抹、params可以傳遞一個也可以傳遞多個參數(shù) 夭织。