keep-alive
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。结合vue-router中使用,可以缓存某个view的整个内容。

vue2的keep-alive的总结

基本使用如下:

keep-alive
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。结合vue-router中使用,可以缓存某个view
的整个内容。
基本使用如下:

<keep-alive>
 <component>
 <!-- 该组件将被缓存! -->
 </component>
</keep-alive>
<keep-alive>
  <component>
    <!-- 该组件将被缓存! -->
  </component>
</keep-alive>

一般有这样的需求,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页

一般有这样的需求,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页
有两个情况:

有两个情况:

  1. 直接点击浏览器的后退返回按钮。
  2. 美高梅电子游戏,点击导航栏中的 /list的链接返回。
  1. 直接点击浏览器的后退返回按钮。

  2. 点击导航栏中的 /list的链接返回。

那么针对第一种情况下,我们直接通过后退按钮时,返回到列表页(/list)
是不需要请求数据。
针对第二种情况下,我们通过链接返回到列表页是需要请求数据。

那么针对第一种情况下,我们直接通过后退按钮时,返回到列表页(/list)
是不需要请求数据。

所以这边有三种情况:

针对第二种情况下,我们通过链接返回到列表页是需要请求数据。

  1. 默认进来列表页需要请求数据。
  2. 进入详情页后,通过浏览器默认后退按钮返回,是不需要ajax的请求的。
  3. 进入详情页后,通过点击链接返回到列表页后,也是需要发ajax请求的。

所以这边有三种情况:

配置如下:

  1. 默认进来列表页需要请求数据。

  2. 进入详情页后,通过浏览器默认后退按钮返回,是不需要ajax的请求的。

  3. 进入详情页后,通过点击链接返回到列表页后,也是需要发ajax请求的。

  1. 入口文件 app.vue 的配置如下:





  2. 在router中设置meta属性,设置 keepAlive: true
    表示需要使用缓存,false的话表示不需要使用缓存。且添加滚动行为
    scrollBehavior
    router/index.js 的配置如下:

    import Vue from ‘vue’;
    import Router from ‘vue-router’;
    // import HelloWorld from ‘@/views/HelloWorld’;
    Vue.use(Router);
    const router = new Router({
    mode: ‘history’, // 访问路径不带井号 需要使用 history模式,才能使用 scrollBehavior
    base: ‘/page/app’, // 配置单页应用的基路径
    routes: [

     {
       path: '/',
       name: 'list',
       component: resolve => require(['@/views/list'], resolve),  // 使用懒加载
       meta: {
         keepAlive: true  // true 表示需要使用缓存
       }
     },
     {
       path: '/list',
       name: 'list',
       component: resolve => require(['@/views/list'], resolve), // 使用懒加载
       meta: {
         keepAlive: true  // true 表示需要使用缓存  false表示不需要被缓存
       }
     },
     {
       path: '/detail',
       name: 'detail',
       component: resolve => require(['@/views/detail'], resolve) // 使用懒加载
     }
    

    ],
    scrollBehavior (to, from, savedPosition) {

     // 保存到 meta 中,备用
     to.meta.savedPosition = savedPosition;
     if (savedPosition) {
       return { x: 0, y: 0 };
     }
     return {};
    

    }
    });
    export default router;

  3. list.vue 代码如下:

  4. detail.vue 代码如下:

配置如下:

二:使用router.meta 扩展

  1. 入口文件 app.vue 的配置如下:

假设现在有3个页面,需求如下:

<!-- 缓存所有的页面 -->
<keep-alive>
 <router-view v-if="$route.meta.keep_alive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keep_alive"></router-view>
  1. 默认有A页面,A页面进来需要一个请求。
  2. B页面跳转到A页面,A页面不需要重新请求。
  3. C页面跳转到A页面,A页面需要重新请求。
  1. 在router中设置meta属性,设置 keepAlive: true
    表示需要使用缓存,false的话表示不需要使用缓存。且添加滚动行为
    scrollBehavior

实现方式如下:
在 A 路由里面设置 meta 属性:

router/index.js 的配置如下:

{
  path: '/a',
  name: 'A',
  component: resolve => require(['@/views/a'], resolve),
  meta: {
    keepAlive: true  // true 表示需要使用缓存
  }
}
import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
const router = new Router({
 mode: 'history', // 访问路径不带井号 需要使用 history模式,才能使用 scrollBehavior
 base: '/page/app', // 配置单页应用的基路径
 routes: [
 {
  path: '/',
  name: 'list',
  component: resolve => require(['@/views/list'], resolve), // 使用懒加载
  meta: {
  keepAlive: true // true 表示需要使用缓存
  }
 },
 {
  path: '/list',
  name: 'list',
  component: resolve => require(['@/views/list'], resolve), // 使用懒加载
  meta: {
  keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存
  }
 },
 {
  path: '/detail',
  name: 'detail',
  component: resolve => require(['@/views/detail'], resolve) // 使用懒加载
 }
 ],
 scrollBehavior (to, from, savedPosition) {
 // 保存到 meta 中,备用
 to.meta.savedPosition = savedPosition;
 if (savedPosition) {
  return { x: 0, y: 0 };
 }
 return {};
 }
});
export default router;

所以router/index下的所有代码变为如下:

  1. list.vue 代码如下:
import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

Vue.use(Router);

const router = new Router({
  mode: 'history', // 访问路径不带井号  需要使用 history模式,才能使用 scrollBehavior
  base: '/page/app',  // 配置单页应用的基路径
  routes: [
    {
      path: '/',
      name: 'list',
      component: resolve => require(['@/views/list'], resolve),  // 使用懒加载
      meta: {
        keepAlive: true  // true 表示需要使用缓存
      }
    },
    {
      path: '/list',
      name: 'list',
      component: resolve => require(['@/views/list'], resolve), // 使用懒加载
      meta: {
        keepAlive: true  // true 表示需要使用缓存  false表示不需要被缓存
      }
    },
    {
      path: '/detail',
      name: 'detail',
      component: resolve => require(['@/views/detail'], resolve) // 使用懒加载
    },
    {
      path: '/a',
      name: 'A',
      component: resolve => require(['@/views/a'], resolve),
      meta: {
        keepAlive: true  // true 表示需要使用缓存
      }
    },
    {
      path: '/b',
      name: 'B',
      component: resolve => require(['@/views/b'], resolve)
    },
    {
      path: '/c',
      name: 'C',
      component: resolve => require(['@/views/c'], resolve)
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    // 保存到 meta 中,备用
    to.meta.savedPosition = savedPosition;
    if (savedPosition) {
      return { x: 0, y: 0 };
    }
    return {};
  }
});
export default router;
<template>
 <div class="hello">
 <h1>vue</h1>
 <h2>{{msg}}</h2>
 <router-link to="/detail">跳转到detail页</router-link>
 </div>
</template>

<script>
export default {
 name: 'helloworld',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 };
 },
 methods: {
 ajaxRequest() {
  const obj = {
  'aa': 1
  };
  Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => {
  console.log(res);
  });
 }
 },
 beforeRouteEnter(to, from, next) {
 next(vm => {
  /*
  如果 to.meta.savedPosition === undefined 说明是刷新页面或可以叫第一次进入页面 需要刷新数据
  如果savedPosition === null, 那么说明是点击了导航链接;
  此时需要刷新数据,获取新的列表内容。
  否则的话 什么都不做,直接使用 keep-alive中的缓存
  */
  if (to.meta.savedPosition === undefined) {
  vm.ajaxRequest();
  }
  if (to.meta.savedPosition === null) {
  vm.ajaxRequest();
  }
 })
 }
};
</script>

在 B 组件里面设置 beforeRouteLeave

  1. detail.vue 代码如下:
beforeRouteLeave(to, from, next) {
  // 设置下一个路由meta
  to.meta.keepAlive = true; // 让A缓存,不请求数据
  next(); // 跳转到A页面
}
<template>
 <div class="list">
 <h1>{{msg}}</h1>
 <router-link to="/list">返回列表页</router-link>
 </div>
</template>
<script>
export default {
 name: 'list',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 };
 },
 created() {
 this.ajaxRequest();
 },
 methods: {
 ajaxRequest() {
  const obj = {
  'aa': 1
  };
  Promise.all([this.$store.dispatch('withdary', obj)]).then((res) => {
  console.log(res);
  });
 }
 }
};
</script>

B组件所有代码如下:

二:使用router.meta 扩展

<template>
  <div class="list">
    <h1>{{msg}}</h1>
    <router-link to="/a">返回a页面</router-link>
  </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      msg: 'Welcome to B Page'
    };
  },
  created() {},
  methods: {
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由meta
    to.meta.keepAlive = true; // 让A缓存,不请求数据
    next(); // 跳转到A页面
  }
};
</script>

假设现在有3个页面,需求如下:

在 C 组件里面设置 beforeRouteLeave:

  1. 默认有A页面,A页面进来需要一个请求。

  2. B页面跳转到A页面,A页面不需要重新请求。

  3. C页面跳转到A页面,A页面需要重新请求。

beforeRouteLeave(to, from, next) {
  // 设置下一个路由meta
  to.meta.keepAlive = false; // 让A不缓存,重新请求数据
  console.log(to)
  next(); // 跳转到A页面
}

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章