Vue 路由props配置

1、作用

让路由组件便于接受参数

2、写法(三种)

src/router/index.js

a、简单

值为对象，通过props传递给组件，组件需要接受

{   
    name:'detail',
    // params参数 需要占位符
    path:'detail/:id/:title',
    component: DetailData,
    // props值 为对象， props中的所有值都会传给  组件DetailData，注意需要 组件接收 
    props:{a:10, b:100}
},

// 接收
props:['a', 'b'],

b、parms传参专用

props值为布尔值，为true ，把通过parms接收到的参数通过props传递给组件， 注意 组件 props 接收

{   
    name:'detail',
    // params参数 需要占位符
    path:'detail/:id/:title',
    component: DetailData,
    props:true
},

接收

props:['id', 'title'],

c、通用(最常用)

值为函数，函数返回值内的每一组key value都会通过prpos传递给组件，组件注意接受

{   
    name:'detail',
    // params参数 需要占位符
    path:'detail/:id/:title',
    component: DetailData,

    // props值为函数，则该函数返回值内的每一个key-value都会 通过 props 传递给组件，注意组件接收值
    props($route){
        return {
            id: $route.params.id,
            title: $route.params.title
        }
    }
} 

接收

// 接收
props:['id', 'title'],