【www.bbyears.com--Dom教程】
keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。结合vue-router中使用,可以缓存某个view的整个内容。
基本使用如下:
一般有这样的需求,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页
有两个情况:
1. 直接点击浏览器的后退返回按钮。
2. 点击导航栏中的 /list的链接返回。
那么针对第一种情况下,我们直接通过后退按钮时,返回到列表页(/list) 是不需要请求数据。
针对第二种情况下,我们通过链接返回到列表页是需要请求数据。
所以这边有三种情况:
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 代码如下:
vue
{{msg}}
跳转到detail页 <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>
4. detail.vue 代码如下:
{{msg}}
返回列表页 <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>
二:使用router.meta 扩展
假设现在有3个页面,需求如下:
1. 默认有A页面,A页面进来需要一个请求。
2. B页面跳转到A页面,A页面不需要重新请求。
3. C页面跳转到A页面,A页面需要重新请求。
实现方式如下:
在 A 路由里面设置 meta 属性:
{ path: "/a", name: "A", component: resolve => require(["@/views/a"], resolve), meta: { keepAlive: true // true 表示需要使用缓存 } }
所以router/index下的所有代码变为如下:
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;
在 B 组件里面设置 beforeRouteLeave
beforeRouteLeave(to, from, next) { // 设置下一个路由meta to.meta.keepAlive = true; // 让A缓存,不请求数据 next(); // 跳转到A页面 }
B组件所有代码如下:
{{msg}}
返回a页面 <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>
在 C 组件里面设置 beforeRouteLeave:
beforeRouteLeave(to, from, next) { // 设置下一个路由meta to.meta.keepAlive = false; // 让A不缓存,重新请求数据 console.log(to) next(); // 跳转到A页面 }
c组件所有代码如下:
{{msg}}
返回a页面 <script> export default { name: "list", data () { return { msg: "Welcome to B Page" }; }, created() {}, methods: { }, beforeRouteLeave(to, from, next) { // 设置下一个路由meta to.meta.keepAlive = false; // 让A不缓存,重新请求数据 console.log(to) next(); // 跳转到A页面 } }; </script>
a组件内的所有的代码如下:
vue
{{msg}}
跳转到b页面 跳转到c页面 <script> export default { name: "helloworld", data () { return { msg: "Welcome to A Page" }; }, methods: { ajaxRequest() { const obj = { "aa": 1 }; Promise.all([this.$store.dispatch("testUrl", 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组件请求数据(包括点击链接和浏览器后退按钮).