路由传参的几中方法

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'],
    }