vue+Element-UI实现完整的登录和注销功能

.login_container{background-color:#2b4b6b;高度：100%；}.login_box{宽度：450px；高度：300px；背景色：#fff；边界半径：3px；//div居中position:absolute;左：50%；顶部：50%；转换：翻译（-50%，-50%）；.avatar_box{高度：130px；宽度：130px；边框：1px实心#eee；边界半径：50%；填充：10px；框阴影：0010px#ddd；位置：绝对；左：50%；转换：翻译（-50%，-50%）；背景色：#fff；img{宽度：100%；高度：100%；边界半径：50%；背景色：#eee；}}}.btns{显示：flex；证明内容：flex-end；}.login_form{位置：绝对；底部：0；宽度：100%；填充：020px；box-sizing:border-box;}然后上篇开始记录，上篇最后一个问题已经解决了，忘了：造成的。修改完成。到目前为止，登录和注销功能已经实现，这是我的代码：Login.vue.login_container{background-color:#2b4b6b;高度：100%；}.login_box{宽度：450px；高度：300px；背景色：#fff；边界半径：3px；//div居中position:absolute;左：50%；顶部：50%；转换：翻译（-50%，-50%）；.avatar_box{高度：130px；宽度：130px；边框：1px实心#eee；边界半径：50%；填充：10px；框阴影：0010px#ddd；位置：绝对；左：50%；转换：翻译（-50%，-50%）；背景色：#fff；img{宽度：100%；高度：100%；边界半径：50%；背景色：#eee；}}}.btns{显示：flex；证明内容：flex-end；}.login_form{位置：绝对；底部：0；宽度：100%；填充：020px；box-sizing:border-box;}main.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'import'./plugins/element.js'import'./assets/global.css'import'./assets/fonts/iconfont.css'importaxiosfrom'axios'//配置请求的根路径axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'//在Vue原型对象上挂载axios，Vue组件可以访问axiosVue.prototype.$http=axiosVue.config.productionTip=falsenewVue({router,render:h=>h(App)}).$mount('#app')Home.vueindex.jsimportVuefrom'vue'importVueRouterfrom'vue-router'importLoginfrom'../components/Login'importHomefrom'../components/Home'Vue.use(VueRouter)constroutes=[{path:'/login',component:Login},{path:'/',redirect:'/login'},{path:'/home',component:Home}]constrouter=newVueRouter({routes})//挂载路由navigationguardrouter.beforeEach((to,from,next)=>{//到要访问的路径//from表示从哪条路径跳转//next是afunctionthatmeansrelease//next()releasenext('/login')强制跳转if(to.path==='/login')returnnext()//gettokenconsttokenStr=window.sessionStorage.getItem('token')if(!tokenStr)returnnext('/login')next()})exportdefaultrouter最后放上效果图~OK，我们继续完善首页的功能，以后记录一下