这篇文章将为大家详细讲解有关怎么在Vue项目中添加一个锁屏功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
全州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！
1. 实现思路
( 1 ) 设置锁屏密码
( 2 ) 密码存localStorage （本项目已经封装h6的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项目中添加一个锁屏功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
