vue路由传参的几种方式(路由带参跳转)

1.动态路由传参

• 路由配置：

{
  path: '/xxx/:uid/:name',    //uid参数、name参数
  name: 'xxx',
  component: () => import('@/views/xxx.vue'),
  children : []
};
 

• 路由跳转

this.$router.push('/xxx/xxx/xxx');  //如果没有添加对应参数，页面出现404，不会到达对应页面

• 在对应页面中拿到路由参数

mounted(){
    let id = this.$route.params.uid;
    let name = this.$route.params.name;
  }

2.query方式传参

• 路由配置：

{
  path: '/xxx',    
  name: 'xxx',
  component: () => import('@/views/xxx.vue'),
  children : []
};

• 路由跳转

this.$router.push({
    path : '/xxx',        //方式1：通过path跳转
    query : {
        uid : 111,
        name : 'zs'
    }
})
 
 
this.$router.push({
    name : 'xxx',        //方式2：通过name跳转
    query : {
        uid : 111,
        name : 'zs'
   }}）

• 在对应页面中拿到路由参数

mounted(){
    let id = this.$route.query.uid;
    let name = this.$route.query.name;
  }

3.params方式传参

• 路由配置：

{
  path: '/xxx',    
  name: 'xxx',
  component: () => import('@/views/xxx.vue'),
  children : []
};
 

• 路由跳转

this.$router.push({
    name : 'xxx',        //只能通过name跳转
    params : {
        uid : 111,
        name : 'zs'
    }
})
 

• 在对应的页面拿到路由参数

mounted(){
    let id = this.$route.params.uid;
    let name = this.$route.params.name;
}