网页中切换窗口,就会执行,组件的创建和销毁,再切换回去,又重新创建组件,这时创建的组件为初始化状态。
例如:如果正在注册账号,无意点击了别的链接了,这个页面跳转到新的窗口,这时点击返回,注册账号的页面又重新创建,之前填的信息没有了。
keep-alive就是帮助我们解决这个问题。
keep-alive 做组件级别缓存,原理是: 不让组件销毁和重新创建。
下面是完整代码App.vue:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/user">User</router-link>
</div>
<!-- keep-alive 做组件级别缓存,原理是: 不让组件销毁和重新创建-->
<!--需求: / 有缓存 /about 没有缓存
访问/ $route.meta.isKeep的值是true,两个router-view中就只展示,有keep-alive的那个. 所以就有缓存
访问/about $route.meta.isKeep的值是false,两个router-view中就只展示没有keep-alive的那个. 所以就没有缓存
-->
<!-- <keep-alive>
<router-view v-if="$route.meta.isKeep"/>
</keep-alive>
<router-view v-if="!$route.meta.isKeep"/> -->
<!-- :include 指定有缓存的组件 -->
<keep-alive :include="['Home']">
<router-view />
</keep-alive>
<!-- 数组里面的值,是组件中的name属性的值 -->
<!-- :exclude 指定没有缓存的组件 -->
<!-- <keep-alive :exclude="['Home']">
<router-view />
</keep-alive> -->
</div>
</template>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
// text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
点击跳转页页后,再返回这个页面的时候,页面的数据不会变化。