实在登录注册，而且登录一次坚持登录的状况，是每一个项目都须要完成的功用。 网上也有许多的要领，不过，不是通俗易懂，在这里说一下我本身的要领，异常简朴有用
中心就是用localStorage存、取数据，如许当革新浏览器，或许封闭在翻开的时刻能到达预期想要的结果

在router/index.js中

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
routes: [
    {path:'/', redirect:'/home'},
    {path:'/login',name:'登录',component:resolve =>{require(['@/components/login'],resolve)}},
    {path:'/home',name:'首页',component:resolve =>{require(['@/components/home'],resolve)}}
    ]
})

个中redirect（默许跳转）能够直接写在home页面，刚进入页面直接跳转首页

然后我们在home.vue的 周期函数created内里做推断 Login的值状况（Login是在login.vue中localStorage存入的变量，如今我们先读取）

      created() {
            console.log(localStorage.getItem("Login"));
            if(localStorage.getItem("Login")){
                console.log("登录过了");//登录胜利了，保留在登录页面   
            }else{
                console.log("没有登录");
                this.$router.push("/login");//没有登录过 返回登录页面
            }
          },

然后我们在login.vue 当用户要求数据胜利的时刻把Login的状况写入

      axios.post("背景接口",qs.stringify({
                      username:"用户名",
                     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的变量,轻易我们在home页面推断是不是登录
                      localStorage.setItem("Login",true)
              }
                    }, (error) => {
                        console.log(error);
                    });

假如首页有退出登录按钮，那退出的时刻实行

         out(){
                  localStorage.removeItem("Login");//删掉我们存的变量就能够了
                  this.$router.push("/login");//点击退胜利按钮返回登录页面
              }

如许就完成了Vue的上岸和注册，用户革新浏览器，或许封闭在翻开都坚持登录状况

怎样是不是是很简朴呢？