app.vue:
需求一: 所有页面跳转到首页时,首页一律用缓存(不重新加载)
router/index.js:
需求二:list 跳转到首页时,首页重新加载;about跳转到首页时,首页不重新加载
【实现步骤】:
1. 首页的路由:去掉写死的meta.keepAlive;
2. 在其他的页面组件内部:在页面离开时的导航守卫中,动态添加目标页面的keepAlive的值
router/index.js:
list.vue:
about.vue:
现在,我们来验证一下(页面mounted钩子打印111),把首页输入框改为:zhang。
点击到 list 页面,再返回首页,发现输入框变回了:zhangsan, 且 mounted 打印的 111 再次打印,说明:页面重新加载,未被缓存
再点击到 about 页面,再返回首页,发现输入框变为:zhang, 且 mounted 没有再次执行,说明:页面未重新加载,被缓存了
app.vue:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/list">List</router-link> |
<router-link to="/about">About</router-link>
</div>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<style>
#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;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>