其实登录、注册、登录一次，保持登录状态是每个项目都需要实现的功能。网上也有很多方法，但是不太好理解。这里我就说说我自己的方法。它非常简单实用。核心是利用localStorage来存储和检索数据，从而在浏览器刷新时，或者关闭再打开时，达到想要的效果。期望的效果是在router/index.jsimportVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',redirect:'/home'},{path:'/login',name:'login',component:resolve=>{require(['@/components/login'],resolve)}},{path:'/home',name:'Home',component:resolve=>{require(['@/components/home'],resolve)}}]})其中redirect（默认重定向）可以直接写在首页，进入页面即可直接跳转然后我们在home.vue的周期函数created中判断Login的值状态（Login是login.vue中localStorage中存储的一个变量，现在先读取）created(){console.log(localStorage.getItem(“登录”））;if(localStorage.getItem("Login")){console.log("loggedin");//登录成功，停留在登录页面}else{console.log("未登录");this.$router.push("/login");//没有登录，返回登录页面}}，然后我们在用户请求数据成功后，将登录状态写入login.vue中的axios.post("后台接口",qs.stringify({username:"username",password:"password"}),{headers:{//请求头"Content-Type":"application/x-www-form-urlencoded","Accept":"application/json"}}).then((response)=>{//成功回调if(response.data.status=="200"){//状态正常时this.$router.push("/home");//存储一个名为Login，值为true的变量，用于判断是否登录首页localStorage.setItem("Login",true)}},(error)=>{console.log(error);});如果首页有退出按钮，则执行out(){localStorage.removeItem("Login");//删除我们保存的变量this.$router.push("/login");//点击退出成功按钮返回登录页面}这样就实现了Vue的登录注册，用户刷新浏览器，或者关闭再打开保持登录状态，是不是很简单？
