이 글은 Vue 프로젝트에 잠금 화면 기능을 추가하는 구현 아이디어를 주로 소개하고 있으며, 필요한 친구들이 참고할 수 있습니다
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() } }) },
SET_LOCK_PASSWD: (state, lockPasswd) => { state.lockPasswd = lockPasswd setStore({ name: 'lockPasswd', content: state.lockPasswd, type: 'session' }) },
SET_LOCK: (state, action) => { state.isLock = true setStore({ name: 'isLock', content: state.isLock, type: 'session' }) },
if (store.getters.isLock && to.path !== lockPage) { next({ path: lockPage }) NProgress.done()
vue를 사용하여 앱 스캐폴딩 도구를 빠르게 개발하는 방법
vue-cli 프로젝트에서 모의 데이터를 사용하는 방법
위 내용은 Vue 프로젝트에 잠금 화면 기능을 추가하는 구현 아이디어에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!