vue 登录跳转

　　前几次做登录处理，都是写一个公用方法，然后在对应的路由页面调用，即判断是不是处于登录状态，如果不是，就返回登录页面。

　　

let exit = (vm)=>{
    let login = sessionStorage.login && JSON.parse(sessionStorage.login);
    if(!sessionStorage.login || (sessionStorage.login && !login.login)){
        layer(vm,"先请登录", "warning");
        sessionStorage.clear();
        vm.$router.push("/login");
    } 
}

a.vue:
//import  exit 方法
mounted(){
　　exit(this)
}

 

　　这样做的不好的地方有两点：1.麻烦，每个页面都写这个函数，要是页面很多的话，增加工作量

　　　　　　　　　　　　　　　2.体验不好，因为是要跳转路由后再做判断，所以页面会有变化，会先是一个空白页然后再调回login页面。

　　所以，最好得在路由跳转之前就做出判断，vue-router 里有个beforeEach 方法，自带的参数（from, to, next），分别为从一个router对象（from）到另一个roter对象(to)，next是执行跳转函数里面也可以带参数。

let layerLogin = new Vue()
router.beforeEach((to, from, next) => {

    let login = sessionStorage.login && JSON.parse(sessionStorage.login)

    if(to.path.indexOf("/home") !== -1 && !login){
        next({path:'/login'})
        layer(layerLogin,"请先登录",'warning')
    } else {
        next();
    }
})

　　这里面因为在注入router的时候就写了方法，所以不能直接调this对象，为了用一些elment-ui的组件，可以自己建一个vue实例，从而去调用ui组件（弹窗）。