1.通过params传参,好处是刷新数据不会丢失,会以/url/123的格式拼接显示在url里面
路由配置:
const rouets=[
{
path:/home/:id,
name:'Home,
component: ()=>import('../views/Home.vue')
}
]
带参数传递:
this.$router.push('/home/123')
获取对应参数:
this.$route.params.id
2.通过路由的属性中的name来确定匹配的路由,通过params来传递参数,特点:刷新会丢失参数,但不会显示在url里面
路由配置:
const routes=[
{
path:'/home',
name:'Home',
component:()=>import('../views/Home.vue')
}
]
带参数传递:
this.$router.push({
name:'Home',
params:{
id:123
}
})
获取对应参数:
this.$route.params.id
3.通过query来传递参数,特点刷新不会丢失数据,但是参数会以?id=123的形式显示在url里面
路由配置:
const routes=[
{
path:'/home',
name:'Home',
component:()=>import('../views/Home.vue')
}
]
带参数传递:
this.$router.push({
path:'home',
query:{
id:123
}
})
获取参数:
this.$route.query.id
4.最好的方法是props传参数,用1,2中设置路由配置
路由配置:
{
path:'/info/:id',
name:'Info',
component:()=>import('../views/Info.vue'),
props:true
}
带参数传递:
this.$router.push('/info/123')
接收参数:
export default {
name:'Info',
data() {
return {
}
},
props:['id'],
}