Vue項(xiàng)目中添加鎖屏功能實(shí)現(xiàn)思路
1. 實(shí)現(xiàn)思路
( 1 ) 設(shè)置鎖屏密碼
( 2 ) 密碼存localStorage （本項(xiàng)目已經(jīng)封裝h5的sessionStorage和localStorage）
( 3 ) vuex設(shè)置 SET_LOCK state.isLock = true (為true是鎖屏狀態(tài))
( 4 ) 在路由里面判斷vuex里面的isLock（為true鎖屏狀態(tài)不能讓用戶后退url和自行修改url跳轉(zhuǎn)頁面否則可以）
（1）設(shè)置鎖屏密碼
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設(shè)置 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()
總結(jié)
以上所述是小編給大家介紹的Vue項(xiàng)目中添加鎖屏功能實(shí)現(xiàn)思路，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue-simple-uploader上傳成功之后的response獲取代碼
這篇文章主要介紹了vue-simple-uploader上傳成功之后的response獲取代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧~2020-09-09
vue+elementUI封裝一個根據(jù)后端變化的動態(tài)table(完整代碼)
這篇文章主要介紹了vue+elementUI,封裝一個根據(jù)后端變化的動態(tài)table,實(shí)現(xiàn)了自動生成和插槽兩個方式，主要把el-table 和el-pagination封裝在一起，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Vue+ElementUI實(shí)現(xiàn)表單動態(tài)渲染、可視化配置的方法
這篇文章主要介紹了Vue+ElementUI實(shí)現(xiàn)表單動態(tài)渲染、可視化配置的方法,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了el-form錯誤提示信息手動添加和取消,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
關(guān)于vue中使用three.js報(bào)錯的解決方法
最近因?yàn)閠hree.js的項(xiàng)目要用Vue.js,下面這篇文章主要給大家介紹了關(guān)于vue中使用three.js報(bào)錯的解決方法,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
VueX 提供了一個全局都可以使用的數(shù)據(jù)管理倉庫，不用考慮父子傳值之類的問題，并且可以跨頁面?zhèn)鬟f數(shù)據(jù)，提高了可維護(hù)性，這篇文章主要介紹了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以參考下2022-12-12
如何使用VUE+faceApi.js實(shí)現(xiàn)攝像頭拍攝人臉識別
Face-api.js是一個JavaScript API,是基于tensorflow.js核心API 的人臉檢測和人臉識別的瀏覽器實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于如何使用VUE+faceApi.js實(shí)現(xiàn)攝像頭拍攝人臉識別的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue?eslint報(bào)錯error?"Component?name?"*****"
這篇文章主要給大家介紹了關(guān)于vue?eslint報(bào)錯error?“Component?name?“*****“?should?always?be?multi-word”的解決方法,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
在Vue中如何實(shí)現(xiàn)打字機(jī)的效果
這篇文章主要介紹了在Vue中如何實(shí)現(xiàn)打字機(jī)的效果，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue-resize深度解讀，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07