vue-router（params，props，query）_综合

路由的query参数

传递参数有两种方式

（1）在<router-link :to='路由+传参'>

<!--      <div v-for="item of detiel">--><!--        <router-link  :to="'/list?id='+item.id+'&title='+item.title">{
   {item.id}}</router-link>--><!--      </div>-->

（2）跳转并携带query参数，to的对象写法

      <!--      使用query进行跳转-->
<!--      <router-link :to="{path:'/',query:{id:2,title:'好大儿'}}">点击</router-link>-->
<!--      <ul>-->
<!--        <li>{
   {$route.query.title}}</li>-->
<!--      </ul>-->

接收参数

$route.query.id

路由params参数

传递参数

（1）跳转并携带params参数，to的字符串写法

<router-link :to="/home/message/detail/666/你好">跳转</router-link>

（2）跳转并携带params参数，to的对象写法

<router-link :to="{name:'xiangqing',params:{id:666,title:'你好'}}"
>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

路由的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}}
}

router-link的replace属性

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

浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push

2.用法<router-link replace>Home</router-link>

一般情况下push用的比较多一些

编程式路由导航

上面所用的都是用<router-link>标签进行路由跳转，那么有没有一种方式是不需要使用<router-link>标签来进行跳转呢

答案是有，我们可以使用编程式路由导航，让跳转更加灵活

//$router的两个API
this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx}
})this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁。

2.具体编码：

<keep-alive include="News"> <router-view></router-view>
</keep-alive>

两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
具体名字：
1. activated路由组件被激活时触发。
2. deactivated路由组件失活时触发。