一、props配置
// 组件内定义
props: ['id']
// 路由映射配置，开启props:true
{
path: '/user/:id',
component: User,
props: true
}
// 1、标签跳转
<router-link to="/user/1">第一个</router-link>
// 2.函数式跳转
getDescribe(id) {
this.$router.push({
path: `/describe/${id}`,
})
}
// 获取参数：
<div>第一种传值props： {{ id }}</div>
二、URL显示在问号之前配置
// 路由映射配置
{
path: '/user/:id',
component: User
}
// 1、标签跳转
<router-link to="/user/1">第二个</router-link>
// 2.函数式跳转
getDescribe(id) {
this.$router.push({
path: `/user/${id}`,
})
}
// 获取参数
<div>第二种传值$route.params.id： {{ $route.params.id }}</div>
三、URL不显示参数配置
// 路由映射配置：
{
path: '/user',
name: 'user',
component: User
}
// 1、标签跳转
<router-link :to="{ name: 'user', params: { id: 1 }}">第四个</router-link>
// 2.函数式跳转：
getDescribe(id) {
this.$router.push({
name: 'user',
params:{ id: id}
})
}
// 获取参数：
<div>第三种传值$route.params.id： {{ $route.params.id }}</div>
四、URL显示在问号之后配置
// 路由映射配置
{
path: '/user',
name: 'user',
component: User
}
// 1、标签跳转
<router-link :to="{ name: 'user', query: { id: 1 }}">第四个</router-link>
// 2.函数式跳转
getDescribe(id) {
this.$router.push({
path: `/user`,
query:{id: id}
})
}
// 获取参数
<div>第四种传值$route.query.id： {{ $route.query.id }}</div>
