1. 實現思路

( 1 ) 設置鎖屏密碼
( 2 ) 密碼存localStorage （本項目已經封裝h5的sessionStorage和localStorage）
( 3 ) vuex設置 SET_LOCK state.isLock = true (為true是鎖屏狀態)
( 4 ) 在路由里面判斷vuex里面的isLock（為true鎖屏狀態不能讓用戶后退url和自行修改url跳轉頁面否則可以）

（1）設置鎖屏密碼

 handleSetLock() {  this.$refs['form'].validate(valid => {  if (valid) {   this.$store.commit('SET_LOCK_PASSWD', this.form.passwd)   this.handleLock()  }  }) },

（ 2 ) 密碼存localStorage setStore是自己封裝的方法

 SET_LOCK_PASSWD: (state, lockPasswd) => {  state.lockPasswd = lockPasswd  setStore({  name: 'lockPasswd',  content: state.lockPasswd,  type: 'session'  }) },

( 3 ) vuex設置 SET_LOCK state.isLock = true 同時存在store里面

 SET_LOCK: (state, action) => {  state.isLock = true  setStore({  name: 'isLock',  content: state.isLock,  type: 'session'  }) },

( 4 ) 在路由里面判斷vuex里面的isLock

 if (store.getters.isLock && to.path !== lockPage) {  next({  path: lockPage  })  NProgress.done()

源碼地址

總結

以上所述是小編給大家介紹的Vue項目中添加鎖屏功能實現思路，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！