6.9.路由跳转的 replace 方法
- 作用：控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式：push和replace
- push是追加历史记录
- replace是替换当前记录，路由跳转时候默认为push方式
- 开启replace模式
- <router-link :replace=“true” …>News</router-link>
- 简写<router-link replace …>News</router-link>
总结：浏览记录本质是一个栈，默认push，点开新页面就会在栈顶追加一个地址，后退，栈顶指针向下移动，改为replace就是不追加，而将栈顶地址替换
src/pages/Home.vue
<template>
<div>
<h2>我是Home的内容</h2>
<div>
<ul class="nav nav-tabs">
<li><router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link></li>
<li><router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link></li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "Home",
beforeDestroy() {
console.log("Home组件即将被销毁了");
},
mounted() {
console.log("Home组件挂载完毕了", this);
}
}
</script>
6.10. 编程式路由导航（不用<router-link>）
作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
this.$router.push({}) 内传的对象与<router-link>中的to相同
this.$router.replace({})
this.$router.forward() 前进
this.$router.back() 后退
this.$router.go(n) 可前进也可后退，n为正数前进n，为负数后退
this.$router.push({
name:'detail',
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'detail',
params:{
id:xxx,
title:xxx
}
})
src/components/Banner.vue
<template>
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Vue Router Demo</h2>
<button @click="back">后退</button>
<button @click="forward">前进</button>
<button @click="test">测试一下go</button>
</div>
</div>
</template>
<script>
export default {
name: "Banner",
methods: {
back(){
this.$router.back();
},
forward(){
this.$router.forward();
},
test(){
this.$router.go(-2);
}
}
}
</script>
src/pages/Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转并携带params参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`"> {{m.title}} </router-link> -->
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
name:'detail',
params:{ id:m.id, title:m.title }
}">
{{m.title}}
</router-link>
<button @click="showPush(m)">push查看</button>
<button @click="showReplace(m)">replace查看</button>
</li>
</ul>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Message",
data() {
return {
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'}
]
}
},
methods:{
showPush(m){
this.$router.push({
name:'detail',
params:{
id:m.id,
title:m.title
}
})
},
showReplace(m){
this.$router.replace({
name:'detail',
params: {
id:m.id,
title:m.title
}
})
}
}
}
</script>
6.11.缓存路由组件
作用：让不展示的路由组件保持挂载，不被销毁
<keep-alive include=“News”><router-view></router-view></keep-alive>
<keep-alive :include=“[‘News’, ‘Message’]”><router-view></router-view></keep-alive>
// 缓存一个路由组件
<keep-alive include="News"> // include中写想要缓存的组件名，不写表示全部缓存
<router-view></router-view>
</keep-alive>
// 缓存多个路由组件
<keep-alive :include="['News','Message']">
<router-view></router-view>
</keep-alive>
src/pages/News.vue
<template>
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
</template>
<script>
export default {
name: "News"
}
</script>
src/pages/Home.vue
<template>
<div>
<h2>我是Home的内容</h2>
<div>
<ul class="nav nav-tabs">
<li><router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link></li>
<li><router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link></li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "Home",
beforeDestroy() {
console.log("Home组件即将被销毁了");
},
mounted() {
console.log("Home组件挂载完毕了", this);
}
}
</script>
