vue简单实现锁屏页面，且不涉及路由

本案例的原理是在原有页面上添加遮罩层进行锁屏，当解锁后遮罩层消失，回到原来的页面，而不做反反复复的路由跳转，实现起来简单。

1、在Vuex中设置全局参数

在store/index中：

import Vuex from 'vuex'

Vue.use(Vuex)

import md5 from 'js-md5';
const user = {
  state: {
    isCover: localStorage.getItem("HLT_lockCOver") || false, //是否覆盖
    isLock: localStorage.getItem("HLT_isLock") || false, //是否锁屏
  },
  mutations: {
    // 锁屏
    SET_LOCK: (state, cover) => {
      state.isLock = true,
      state.isCover = cover;
      localStorage.setItem("HLT_LockCOver", state.isCover);
    },
    CLEAR_LOCK: (state, cover) => {
      state.isCover = cover;
      state.isLock = false;
      localStorage.removeItem("HLT_LockCOver");
    },
    PREVENT_REFRSH: (state, cover) => {
      state.isCover = cover
    },
  },

  actions: {
     // 登录方法
    Login({
      commit
    }, userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
      const uuid = userInfo.uuid
      let md5password = md5(password);
      return new Promise((resolve, reject) => {
        login(username, password, code, uuid).then(res => {
          setToken(res.token)
          commit('SET_TOKEN', res.token)
          commit('SET_PASSWORD', md5password)

          //记得登录的时候用MD5加密将登录密码保存在localStorage中,用于后续解锁
          localStorage.setItem("lockPassword", md5password)

          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

     // 与锁屏有关方法
    setlock: ({commit}, cover) => {
      commit("SET_LOCK", cover)
    },
    clearLock: ({commit}, args) => {
      commit("CLEAR_LOCK", args)
    },
    preventRefresh: ({commit}, cover) => {
      commit("PREVENT_REFRSH", cover)
    }

}

const store = new Vuex.Store({
  modules: {
    user,
  },
})

export default store

2、编写锁屏页面：

创建sereen/index.vue页面用来做锁屏页面，样式和图片自己随意编辑：

3、在页面中绑定按钮使用它

锁屏

    // 锁屏：
    lockScreen() {
      this.$store.dispatch("setlock", true);
    },