一、router-link 的 replace 属性
1. 作用
控制路由跳转时操作浏览器历史记录的模式。
2. 两种写入方式
- push：追加历史记录。（默认设置）
- replace：替换当前记录。
3. 开启 replace 模式
//完整写法： <router-link :replace="true" ...>News</router-link> //简写： <router-link replace ...>News</router-link>
4. 实例：【进退两难】
https://www.bilibili.com/video/BV1RT4y1q7Ha?t=1.2
replace模式
App.vue
- replace 有两种编写方式，一般使用简写。
<router-link :replace="true" class="list-group-item" active-class="active" :to="{name: 'guanyu'}">About</router-link> <router-link replace class="list-group-item" active-class="active" to="/home">Home</router-link>
二、编程式路由导航
1. 作用
- 不借助 <router-link> 实现路由跳转，让路由跳转更加灵活。
- 这样除了 <a> ，其他标签也可以使用路由导航（如：button等）
2. 具体编码
push
this.$router.push({ name: 'xiangqing', params: { id: xxx, title: xxx } })
replace
this.$router.replace({ name: 'xiangqing', params: { id: xxx, title: xxx } })
前进
this.$router.forward()
后退
this.$router.back()
前进或后退（自定义步数）
this.$router.go(n) //n为整数(正/负)
3. 实例：使用按钮实现跳转
https://www.bilibili.com/video/BV1R94y1U7h3?t=2.9
编程式路由导航
Banner.vue
<div class="page-header"><h2>Vue Router Demo</h2></div> <button @click="back">后退</button> <button @click="forward">前进</button> <button @click="test">后退两步</button> methods: { back() { this.$router.back(); }, forward() { this.$router.forward(); }, test() { this.$router.go(-2); } }
Message.vue
<button @click="pushShow(m)">push</button> <button @click="replaceShow(m)">replace</button> methods:{ pushShow(m) { this.$router.push({ name: "xiangqing", params: { id: m.id, title: m.title, } }) }, replaceShow(m) { this.$router.replace({ name: "xiangqing", params: { id: m.id, title: m.title, } }) } }
三、缓存路由组件
1. 作用
默认情况下，不展示的路由组件是会自动销毁的，缓存路由组件就是让不展示的路由组件保持挂载，不被销毁。
2. 具体代码
使用 <keep-alive> 标签，注意是写在用于展示的组件里。
include="myNews" 表示只对 News 组件缓存，myNews 是定义的 News 组件的 name 名。
//缓存一个路由组件 <keep-alive include="myNews"> <router-view></router-view> </keep-alive>
//缓存多个路由组件 <keep-alive :include="['myNews', 'myMessage']"> <router-view></router-view> </keep-alive>
3. 实例：对指定路由的缓存
https://www.bilibili.com/video/BV1ig411o795?t=0.9
路由缓存
News.vue
<template> <ul> <li>news001 <input type="text"></li> <li>news002 <input type="text"></li> <li>news003 <input type="text"></li> </ul> </template> <script> export default { name: "myNews", beforeDestroy(){ console.log('New组件即将被销毁'); } }; </script>
Home.vue
- 如果不在 <keep-alive> 中配置 include 属性，那么 Home 组件中展示的所有路由都会缓存。
- 通过 include='xxx'，我们可以指定要缓存的路由。
<template> <div> <h2>Home组件内容</h2> <div> <ul class="nav nav-tabs"> <li> <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link> </li> <li> <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link> </li> </ul> <keep-alive include="myNews"> <router-view></router-view> </keep-alive> </div> </div> </template> <script> export default { name: "myHome", }; </script>
四、两个新的生命周期钩子
1. 作用
路由组件所 独有的 两个钩子，用于捕获路由组件的激活状态。
2. 具体名字
- activated：路由组件被 激活时 触发。
- deactivated：路由组件 失活时 触发。
3. 实例：路由不被销毁并让定时器失活
https://www.bilibili.com/video/BV1PT4y1B7a3?t=0.8
路由的两个钩子
News.vue
<template> <ul> <li :style="{opacity}">认真学习Vue</li> <li>news001 <input type="text"></li> <li>news002 <input type="text"></li> <li>news003 <input type="text"></li> </ul> </template> <script> export default { name: "myNews", data(){ return{ opacity: 1 } }, activated() { console.log('News组件被激活了'); this.timer = setInterval(() => { console.log('@'); this.opacity -= 0.01 if(this.opacity <=0 ) this.opacity = 1 },16) }, deactivated() { console.log('News组件失活了'); clearInterval(this.timer) } }; </script>
Home.vue
<keep-alive include="myNews"> <router-view></router-view> </keep-alive>
不积跬步无以至千里 不积小流无以成江海
