Vue 2.x – 路由的props配置/replace属性

7.路由的props配置

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

{
    name:'xiangqing',
    path:'detail/:id',
    component:Detail,

    //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
    // props:{a:900}

    //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
    // props:true

    //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
    props(route){
        return {
            id:route.query.id,
            title:route.query.title
        }
    }
}

8.<router-link>的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push`和`replace`，`push`是追加历史记录，`replace`是替换当前记录。路由跳转时候默认为`push
3. 如何开启replace`模式：`<router-link replace .......>News</router-link>

代码

https://github.com/icrons/Vue-Learn/tree/master/35_src_%E8%B7%AF%E7%94%B1props%E9%85%8D%E7%BD%AE

https://github.com/icrons/Vue-Learn/tree/master/36_src_router-link%E7%9A%84replace%E5%B1%9E%E6%80%A7