路由的params参数和路由的props的配置

路由的params参数

1，配置路由，声明params参数

    {
        name:'userDetail',
        path:'userDetail/:id:name',
        component:UserDetail,
        props:true
      },

2，传递参数

<!-- 跳转携带params参数，to的对象写法 -->
    <router-link
              :to="{
                name: 'userDetail',
                params: { id: value.id, name: value.name },
              }"
            ></router-link>

路由的props配置

作用：让路由组件更方便的收到参数

{
          name:'userDetail',
          path:'userDetail/:id',
          component:UserDetail,
          // props:true
          //第一种写法：props值为对象，该对象胡总的所有的key-value的组合最终都会通过props传给目标组件
          // props:{id:2,name:'zs'}
          //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给目标组件
          // props:true
          //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给目标组件
          props($route){
            return {
              id:$route.query.id,
              name:$route.query.name
            }
          }
        },