首先了解 localStorage

sessionStorage和localStorage

Web Storage实际上由两部分组成：sessionStorage与localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
方法 :
1.localStorage.getItem(key):获取指定key本地存储的值
2.localStorage.setItem(key,value)：将value存储到key字段
3.localStorage.removeItem(key):删除指定key本地存储的值
4.localstroage.clear();删除所有值

实际使用

第一步：在login.vue页面添加如下代码

                  let user = {userId:1,mobile:"vue123456",password:"123456"}let _this = thisif(this.name==user.name&&this.password==user.password){setTimeout(()=>{Indicator.close()},1000)setTimeout(()=>{localStorage.setItem("access-user",this.password)_this.$router.replace({path: '/cart'})},1000)}else{setTimeout(()=>{Indicator.close()},1000)localStorage.setItem("access-user",this.mobile)let instance=Toast("账号或密码输入错误！");setTimeout(() => {instance.close();}, 2000)return}

其关键代码：

第二步：在router目录下的index.js文件中添加

//解决路由跳转错误
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)return originalPush.call(this, location).catch(err => err)
}router.beforeEach((to, from, next) => {if (to.path.startsWith('/login')) {window.localStorage.removeItem('access-user')next()} else if(to.path.startsWith('/register')){next()}else {if (window.localStorage.getItem('access-user')!=null) {next()} else {next({path: '/login'})}}
})

完成以上第二步，即可实现未在登录页面完成登录操作，而不能正确访问其他界面