1、keep-alive的使用
在SPA应用中，我们有时候需要来回的切换路由，而组件就会重复的创建和销毁。
keep-alive是Vue内置的一个组件，它可以使被包含的组件保留状态，可以避免重复渲染。
相对应的router-view也是一个组件，如果外面想所有路径匹配到的视图组件都能被缓存起来，可以将它用keep-alive包裹起来。
app.vue
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-link :to="'/user/' + userId">用户</router-link>
<router-link :to="{path:'/profile',query:{name:'why',age:18,height:180}}">档案</router-link>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
home.vue
<template>
<div>
<h2>我是home组件</h2>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default{
created() {
console.log('home created');
},
destroyed() {
console.log('home destroyed');
}
}
</script>
<style>
</style>
如上图所示，我们在app.vue中用keep-alive把这四个组件都缓存起来，这里我们只在home.vue中检验他的创建和销毁，运行、切换home created，只输出了一次，home destroyed没有输出；则表示组件只被创建了一次，且被缓存起来并没有被销毁。
但如果说向home.vue中也有两个子组件展示的时候，切换路由，返回的时候还是要展示上次离开时的组件；则home.vue中script位置应该改成如下：
<script>
export default{
data() {
return {
path: '/home/news'//初始显示组件路由
}
},
created() {
console.log('home created');
},
destroyed() {
console.log('home destroyed');
},
activated() {
console.log('activated',this.path);
this.$router.push(this.path)
},
// deactivated() {
// this.path = this.$route.path
// console.log('deactivated',this.path);
// },
beforeRouteLeave(to,from,next) {
this.path = this.$route.path
console.log('beforeRouteLeave',this.path);
next()
}
}
</script>
activated()和activated()方法只有在keep-alive组件中才有效果，不然是无效的。
我们这里的原理是：
- 1、设置一个变量path来保存离开时的路由。
- 2、当组件状态变为活跃后跳转为离开时路由。
至于为什么不在上面的deactivated()中通过this.path = this.$route.path获取路由，那是因为该方法执行的时机this.$route.path已经不是我们所想要保存的路由，而是跳转之后显示出来组件的路由，所以我们这里通过beforeRouteLeave()方法来获取离开组件时路由。
2、Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/xxx/xxx"
这里我们还会碰到一个小问题，当我们从其他组件切换会home.vue组件时会执行push方法，而当组件变为活跃状态时还会调用一次push方法，当两次push地址相同时，则会报Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home/news".
解决方法：
- 1、在router配置文件（/router/index.js）下添加
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to){
return VueRouterPush.call(this,to).catch(err => err)
}
- 2、使用 catch 方法捕获异常
this.$router.push(route).catch(err => {
console.log('跳转异常：',err)
})
- 3、在进行路由跳转时添加判断，若一致则不跳转
go(item) {
if (this.$route.path !== item.url) {
this.$router.push({ path: item.url })
}
}
3、keep-alive的exclude属性
exclude：字符串或正则表达式，任何匹配的组件都不会被缓存
这里以profile.vue组件验证为例
<template>
<div>
<h2>我是profile组件</h2>
<p>{{$route.query.name}}</p>
<p>{{$route.query}}</p>
</div>
</template>
<script>
export default{
name:'profile',
created() {
console.log('profile created');
},
destroyed() {
console.log('profile destroyed');
},
}
</script>
<style>
</style>
注：这里要设置script中的name属性，以便于keep-alive组件识别匹配组件。
而在keep-alive使用以下设置
<keep-alive exclude="profile">
<router-view></router-view>
</keep-alive>
这样就做到了profile.vue组件的随时创建和随时销毁
