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項目中添加鎖屏功能實現思路，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
