Vue Router replace 编程式导航缓存路由组件

6.9.路由跳转的 replace 方法

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：push和replace
1. push是追加历史记录
2. replace是替换当前记录，路由跳转时候默认为push方式
开启replace模式
1. <router-link :replace=“true” …>News</router-link>
2. 简写<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>