一、props配置
// 組件內(nèi)定義
props: ['id']
// 路由映射配置僵控，開啟props:true
{
path: '/user/:id',
component: User,
props: true
}
// 1柏副、標簽跳轉(zhuǎn)
<router-link to="/user/1">第一個</router-link>
// 2.函數(shù)式跳轉(zhuǎn)
getDescribe(id) {
this.$router.push({
path: `/describe/${id}`,
})
}
// 獲取參數(shù)：
<div>第一種傳值props： {{ id }}</div>
二脾歇、URL顯示在問號之前配置
// 路由映射配置
{
path: '/user/:id',
component: User
}
// 1、標簽跳轉(zhuǎn)
<router-link to="/user/1">第二個</router-link>
// 2.函數(shù)式跳轉(zhuǎn)
getDescribe(id) {
this.$router.push({
path: `/user/${id}`,
})
}
// 獲取參數(shù)
<div>第二種傳值$route.params.id： {{ $route.params.id }}</div>
三逗旁、URL不顯示參數(shù)配置
// 路由映射配置：
{
path: '/user',
name: 'user',
component: User
}
// 1嘿辟、標簽跳轉(zhuǎn)
<router-link :to="{ name: 'user', params: { id: 1 }}">第四個</router-link>
// 2.函數(shù)式跳轉(zhuǎn)：
getDescribe(id) {
this.$router.push({
name: 'user',
params:{ id: id}
})
}
// 獲取參數(shù)：
<div>第三種傳值$route.params.id： {{ $route.params.id }}</div>
四、URL顯示在問號之后配置
// 路由映射配置
{
path: '/user',
name: 'user',
component: User
}
// 1痢艺、標簽跳轉(zhuǎn)
<router-link :to="{ name: 'user', query: { id: 1 }}">第四個</router-link>
// 2.函數(shù)式跳轉(zhuǎn)
getDescribe(id) {
this.$router.push({
path: `/user`,
query:{id: id}
})
}
// 獲取參數(shù)
<div>第四種傳值$route.query.id： {{ $route.query.id }}</div>
