文章目录
一、router-link 的 replace 属性
1. 作用
控制路由跳转时操作浏览器历史记录的模式。
2. 两种写入方式
- push：追加历史记录。（默认设置）
- replace：替换当前记录。
3. 开启 replace 模式
//完整写法：
<router-link :replace="true" ...>News</router-link>
//简写：
<router-link replace ...>News</router-link>
4. 实例：【进退两难】
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. 实例：使用按钮实现跳转
编程式路由导航
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. 实例：对指定路由的缓存
路由缓存
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. 实例：路由不被销毁并让定时器失活
路由的两个钩子
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>
不积跬步无以至千里 不积小流无以成江海
点个关注不迷路，持续更新中…