路由props配置和replace属性

1. 路由的props配置

作用： 让路由组件更方便的收到参数，简化参数读取

{
    name: 'xiangqing',
    path: 'detail/:id',
    component: Detail,
    // 第一种写法： props值为对象, 该对象中所有的key-value的组合最终都会通过props传给Detail组件
    
    // 第二种写法： props值为布尔值, 布尔值为true, 则把路由收到的所有params参数通过props传给Detail组件
    // props:true
    // 第三种写法： props值为函数, 该函数返回的对象中每一组key-value都会通过props传给Detail组件
    props($route){
        // $route还可以通过解构{query}得到query对象，或者连续解构赋值{query:{id, title}}，使得return配置更简洁
        return {
            id: $route.query.id
            titile: $route.query.title            
        }
    }
}

2. router-link的replace属性

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

提示

浏览器的历史记录存放在栈中，每次push浏览记录，历史记录不断增加，而replace使得历史记录数目保持不变