路由传参的三种方式和props获取路由传参

一直理不清楚路由传参的几种方式，今天总结记录下

第一种方法通过params与配置路由格式（特点：刷新数据不会丢失，会以/user/1234格式拼接显示在url里面）

路由配置

{
     path: '/user/:id',
     name: 'user',
     component: user
   }

带参数传递

 //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: '/user/123',
        })

获取对应参数

this.$route.params.id

第二种方法通过路由属性中的name来确定匹配的路由，通过params来传递参数（特点：刷新会丢失参数，但不会显示在url里面）

路由配置

{
     path: '/user',
     name: 'user',
     component: user
   }

带参数传递

this.$router.push({
      name: 'user',
      params: {
        id: id
      }
    })

获取对应参数

this.$route.params.id

第三种方式使用path来匹配路由，然后通过query来传递参数（特点：刷新不会丢失数据，但是参数会以?id:123的格式拼接显示在url里面）

路由配置

{
     path: '/user',
     name: 'user',
     component: user
   }

带参数传递

this.$router.push({
      path: '/user',
      query: {
        id: id
      }
    })

获取对应参数

this.$route.query.id

组件的主要功能就是可以复用，但是一旦使用了$route获取路由参数，该组件就会与路由参数具有高耦合性，不便于组件的复用。为了解耦，我们可以使用props来接受路由传参，也可以自定义的让父组件进行出传参。（经过测试这个方法只适合使用params能接收到的路由参数，也就是上文中的第一，二种方法）

在组件定义props来接收参数或者用于父组件传参

props: {
    id: {
        type: String,
            default: ''
    }
}

接收参数

//可以使用以前的方法获取参数
this.$route.params.id
//但是更推荐直接使用props
this.id