这篇文章主要介绍了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() } }) },
（ 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快速开发app的脚手架工具
vue-cli项目中怎么使用mock数据
以上就是关于vue项目中添加锁屏功能的实现思路的详细内容。