用vue开发移动H5应用框架-第四章（物理按键返回监听与页面缓存）

前言

本教程带你用vue-cli3.0开发一个开箱即用的移动端h5开发框架，本章讲的是正式开发前的准备工作。

物理按键的返回监听

在开发应用的过程中我们往往会遇到这样的问题，监听浏览器的返回然后执行所需要的的功能。这里对返回监听进行的组件化，在需要使用的页面进行调用即可，代码如下：

<template>
  <div>
    <!-- 在未使用keepalive的页面使用 -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Dialog } from "vant";

@Component({
  components: {},
})
export default class Home extends Vue {
  //
  back = true;
  //监听物理返回键\
  backListen() {
    // doing
    Dialog.confirm({
      title: "监听返回",
      message: "确定离开吗",
    })
      .then(() => {
        this.$router.go(-2);
      })
      .catch(() => {
        console.log("cancel");
      });
    (function () {
      window.history.pushState({ title: "title", url: "#" }, "title", "#");
    })();
    this.back = false;
  }
  backNotice() {
    if (this.back == false) {
      return false;
    }
    console.log(this.$route.meta);
    (function () {
      window.history.pushState({ title: "title", url: "#" }, "title", "#");
    })();
    window.addEventListener("popstate", this.backListen, false);
  }
  /* created */
  created() {
    this.backNotice();
    console.log("created");
  }
  /* destoryed */
  destroyed() {
    console.log("destoryed");
    window.removeEventListener("popstate", this.backListen, false);
  }
}
</script>

实现页面缓存

页面缓存大多用在表单信息的填写，当执行跳转返回等操作后再次进入这个页面保留正在填写的信息，vue官方给出了keepalive来解决这个问题，这里进行keepalive的封装，方便在项目中进行调用

1.进行vuex的临时存储，来记录要缓存的页面

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    catchArr: [ '' ] //keepAlive保存缓存的列表
  },
  mutations: {
    // 对指定组件进行动态更改缓存（缓存）--组件调用该方法时，判断该组件是否存在于该缓存数组，无则添加
    iskeepAlive(state, component) {
	!state.catchArr.includes(component) && state.catchArr.push(component);
    },
    // 对指定组件进行动态更改缓存（不缓存）--组件调用该方法时，从缓存数组中删除对应的组件元素
    noKeepAlive(state, component) {
      const index = state.catchArr.indexOf(component);
      index > -1 && state.catchArr.splice(index, 1);
    },
  },
  actions: {

  },
  modules: {
  }
})

2.进行路由的配置

keepAlive为true开启页面的缓存，false则不开启

  //keepalive测试-a
  {
    path: "/demo/keeplive/a",
    name: "Keepalivea",
    meta: { title: "keepalive测试a", keepAlive: true, auth: true },
    component: () => import("@/views/demo/keepAlive/a.vue")
  },

时clearAlive为true时表示清空相邻页面的缓存，从a->b页面开启了缓存，当b页面返回到a时则清除缓存

  {    path: "/option",    name: "Option",    meta: { title: "项目列表", keepAlive: false, auth: true, clearAlive: true },    component: () => import("@/views/demo/Option.vue")  },

3.main.js配置路由监听

//路由钩子
router.beforeEach((to, from, next) => {
  // 对组件进行动态缓存
  if (to.meta.keepAlive === true) {
    store.commit("iskeepAlive", to.name);
    next();
  } else if (from.meta.keepAlive === true && to.meta.clearAlive == true) {
    store.commit("noKeepAlive", from.name);
    next();
  }

  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  /* 匹配路由权限 */
  const userInfo = sessionStorage.getItem("userInfo") || null; //获取登录信息
  if (!userInfo && to.meta.auth) {
    next("/login");
  } else {
    next();
  }
});

Duang总结

快捷开发vue移动H5开发框架