Rumah >hujung hadapan web >tutorial js >在vue2中通过keep-alive如何使用

在vue2中通过keep-alive如何使用

亚连
亚连asal
2018-06-19 14:47:562523semak imbas

vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗。本文给大家介绍vue2中的keep-alive使用总结及注意事项,需要的朋友参考下吧

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

基本使用如下:

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

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

有两个情况:

1. 直接点击浏览器的后退返回按钮。

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

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

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

所以这边有三种情况:

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

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

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

配置如下:

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

<!-- 缓存所有的页面 -->
<keep-alive>
 <router-view v-if="$route.meta.keep_alive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keep_alive"></router-view>

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

router/index.js 的配置如下:

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

3. list.vue 代码如下:

<template>
 <p class="hello">
 <h1>vue</h1>
 <h2>{{msg}}</h2>
 <router-link to="/detail">跳转到detail页</router-link>
 </p>
</template>

<script>
export default {
 name: &#39;helloworld&#39;,
 data () {
 return {
  msg: &#39;Welcome to Your Vue.js App&#39;
 };
 },
 methods: {
 ajaxRequest() {
  const obj = {
  &#39;aa&#39;: 1
  };
  Promise.all([this.$store.dispatch(&#39;testUrl&#39;, 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>

4. detail.vue 代码如下:

<template>
 <p class="list">
 <h1>{{msg}}</h1>
 <router-link to="/list">返回列表页</router-link>
 </p>
</template>
<script>
export default {
 name: &#39;list&#39;,
 data () {
 return {
  msg: &#39;Welcome to Your Vue.js App&#39;
 };
 },
 created() {
 this.ajaxRequest();
 },
 methods: {
 ajaxRequest() {
  const obj = {
  &#39;aa&#39;: 1
  };
  Promise.all([this.$store.dispatch(&#39;withdary&#39;, obj)]).then((res) => {
  console.log(res);
  });
 }
 }
};
</script>

二:使用router.meta 扩展

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

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

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

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

实现方式如下:

在 A 路由里面设置 meta 属性:

{
 path: &#39;/a&#39;,
 name: &#39;A&#39;,
 component: resolve => require([&#39;@/views/a&#39;], resolve),
 meta: {
 keepAlive: true // true 表示需要使用缓存
 }
}

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

import Vue from &#39;vue&#39;;
import Router from &#39;vue-router&#39;;
// import HelloWorld from &#39;@/views/HelloWorld&#39;;

Vue.use(Router);

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

在 B 组件里面设置 beforeRouteLeave

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

B组件所有代码如下:

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

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

在 C 组件里面设置 beforeRouteLeave:

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

c组件所有代码如下:

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

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

a组件内的所有的代码如下:

<template>
 <p class="hello">
 <h1>vue</h1>
 <h2>{{msg}}</h2>
 <router-link to="/b">跳转到b页面</router-link>
 <router-link to="/c">跳转到c页面</router-link>
 </p>
</template>

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

注意 b组件到a组件不重新请求数据 (包括点击链接和浏览器后退按钮),c组件到a组件请求数据(包括点击链接和浏览器后退按钮).

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

通过Node.js使用Koa进行项目搭建

使用JavaScript实现比异步更好的解决方法?

有关Vue高阶组件的运用

详细介绍Vue数据绑定

关于网站生成章节目录代码示例

在Bootstrap框架里使用treeview如何实现动态加载数据

Atas ialah kandungan terperinci 在vue2中通过keep-alive如何使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn