一、前言
- 当使用路由跳转到其他页面的时候,要求缓存当前页面,比如列表页面跳转到详情页面,需要缓存列表内容,并且保存滚动条位置,也有时候需要缓存的页面里面有部分内容不缓存,总之各种情况,下面就列举其中一些例子
- vue2和vue3的使用方式是不一样的
- created()方法和mounted()方法在页面初始化的时候会执行,如果缓存了页面,这两个方法都不会再执行,还有如果缓存了页面,vue2中的destroyed()和vue3中的unmounted()方法都不会执行
- activated()方法在每次进入页面都会执行
二、使用
1.vue2和vue3的不同
vue2:
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<!-- vue2.x配置 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
</template>
vue3:
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div