一 keep-alive
缓存组件内容, 避免组件反复加载, 影响效率
(1) 在路由中配置:
添加 meta:{keepAlive:true}
- {
- path: '/',
- name: 'home',
- component: Home,
- meta:{
- keepAlive:true
- }
- }
其中: keepAlive 是自定义属性名, meta 是用来专门保存自定义属性值的配置项
(2) App.vue 中:
如果当前路由需要缓存 ($route.meta.keepAlive==true), 就放在 keep-alive 包裹的一个 router-view 中;
如果当前路由不要缓存 ($route.meta.keepAlive==false), 就 keep-alive 外的一个 router-view 上.
- <keep-alive>
- <router-view v-if="$route.meta.keepAlive"/>
- </keep-alive>
- <router-view v-if ="!$route.meta.keepAlive"></route-view>
此时: 这个页面带有 keepAlive 为 true 的路由对应的页面, 只在首次请求时, 加载一次, 以后的后退跳转操作, 都不再重新渲染内容.
二 路由守卫 | 路由钩子函数
在发生路由跳转时, 自动执行的回调函数
如有需求:
当从首页进入搜索列表页时是第一次加载, 需要从服务器进行加载; 然后从搜索列表页进入详情页也是第一次加载.
但是当从详情页返回列表页, 任然希望还是原来搜索到的商品, 不需要从服务器加载, 而是直接使用浏览器缓存的页面, 此时需要 keep-alive 和路由守卫协同作用
(1) 首页进入商品列表页, 不需要缓存, 需要重新搜索:
index.vue(首页) 中
- beforeRouteLeave(to,from,next){
- console.log(` 离开首页...`);
- // 如果从首页跳到 products
- if(to.name=="products"){
- to.meta.keepAlive=false;
- }
- next();
- }
products.vue(商品列表页) 中:
- beforeRouterLeave(to,from,next){
- console.log(` 离开商品列表页 `);
- if(to.name=="details"){
- // 如果去的是商品详情页, 就缓存当前页面
- from.keepAlive=true;
- }
- }
details.vue(商品详情页) 中:
- beforeRouterLeave(to,from,next){
- console.log(` 路由离开详情页面 `);
- if(to.name=="products"){
- // 如果去的是原来的商品列表页, 就缓存当前的压面, 下次进入这个访问过的商品就不用重新加载了
- to.meta.keepAlive=true;
- }
- }
来源: http://www.bubuko.com/infodetail-3462460.html