注意:
使用query传参的时候,name,path都可以引入,但使用params传参的时候只能使用name进行引入。接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name
进行路由跳转的时候,我们使用this.$router.push(‘路径')
query更加类似于我们ajax中get传参,params则类似于post,前者在浏览器地址栏中显示参数,后者则不显示
1.动态路由传参
路由配置:
{
path: '/update/:uid/:name', //uid参数、name参数
name: 'Update',
component: () => import('@/views/update.vue'),
children : []
};
路由跳转:
this.$router.push('/update/111/xiaoming'); //如果没有添加对应参数,页面出现404,不会到达对应页面
在对应页面中拿到路由参数进行网络请求:
mounted(){
let id = this.$route.params.uid;
let name = this.$route.params.name;
//进行网络请求...
}
2.query方式传参
路由配置:
{
path: '/update',
name: 'Update',
component: () => import('@/views/update.vue'),
children : []
};
路由跳转(两种方式):
this.$router.push({
path : '/update', //方式1:通过path跳转
query : {
uid : 111,
name : 'xiaoming'
}
})
this.$router.push({
name : 'Update', //方式2:通过name跳转
query : {
uid : 111,
name : 'xiaoming'
}
})
在对应页面中拿到路由参数进行网络请求:
mounted(){
let id = this.$route.query.uid;
let name = this.$route.query.name;
//进行网络请求...
}
3.params方式传参
路由配置:
{
path: '/update',
name: 'Update',
component: () => import('@/views/update.vue'),
children : []
};
路由跳转(只有一种方式):
this.$router.push({
name : 'Update', //只能通过name跳转
params : {
uid : 111,
name : 'xiaoming'
}
})
在对应页面中拿到路由参数进行网络请求:
mounted(){
let id = this.$route.params.uid;
let name = this.$route.params.name;
//进行网络请求...
}