【6月日新计划更文活动】第7天

路由的 Props 配置

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

{
  name: 'xiangqing', // 给路由命名
  path: 'detail/:id/:title',    // params 参数
  component: Detail,

  // props 的第一种写法，值为对象。该对象中所有 key-value 都会以 Props的形式传给 Detail 组件
    props: {
      a: 1,
      b: 'He'
    }, // 传递的是 死数据

  //  Props 的第二种写法，值为布尔值。若布尔值为真，就会把路由组件接收到的所有 params参数，以 Props的形式传递给 Detail组件
    props: true

 // Props 的第三种写法：值为函数
  props($route) {
    return {
      // id: $route.query.id,
      // title: $route.query.title        // query传参
      id: $route.params.id,                        // params传参
      title: $route.params.title
    }
  }
}

<router-link> 的 replace 属性

1、作用：控制路由跳转时操作浏览器历史记录的模式

2、浏览器的历史记录有两种写入方式：分别为，push 、replace。push是追加历史记录，replace是替换当前记录。 默认为push

3、开启 replace模式: <router-link replace ......>About</router-link>