有一个父组件Msite，子组件child1

父组件中点击button跳转到child1，并传递参数

<button @click="handleClick">child1</button>

第一种方式：

参数写在path中

跳转代码：

 handleClick(){
      this.$router.push({
        path:`/msite/child1/${5}`
      })
    }

路由中的配置：

{
    path:'/msite',
    name:'Msite',
    component:() => import('@/views/Msite.vue'),
    children:[
      {
        path:'child1/:id',
        name:'child1',
        component:() => import('@/views/components/child1.vue')
      }
    ]

  },

子组件中接收参数:

this.$route.params.id

第二种方式：

name+params

路由跳转：

handleClick(){
      this.$router.push({
         name:'child1',
         params:{
           id:3,
         },
      })
    }

路由配置：

{
    path:'/msite',
    name:'Msite',
    component:() => import('@/views/Msite.vue'),
    children:[
      {
        path:'child1',
        name:'child1',//这里的name要与上面的name对应
        component:() => import('@/views/components/child1.vue')
      }
    ]

  },

接受参数

this.$route.params.id

第三种方式：

path+query

路由跳转：

handleClick(){
      this.$router.push({
         path:'/msite/child1',//这里路径要与路由配置中的路由对应
         query:{
           id:3,
         },
      })
    }

路由配置：

{
    path:'/msite',
    name:'Msite',
    component:() => import('@/views/Msite.vue'),
    children:[
      {
        path:'child1',//这里的完整路径会被映射成/msite/child1
        component:() => import('@/views/components/child1.vue')
      }
    ]

  },

接受参数

this.$route.query.id