vue----webpack模板----局部路由守卫

 路由守卫分类：

1.局部路由守卫

2.全局路由守卫

局部路由守卫

只适合在当前路由使用，是局部的路由守卫
 
当前路由进入，更新，离开时要做的事情
 
路由进入：
一个页面进入另一个页面， 是否登陆，
查看个人信息   是否登录
用途：
　　1.验证用户是否登录
　　2.支付前，判断余额是否足够
　　3.热力图
　　4.更新信息

 
登录----->进入，未登录------>登录页面
 
路由更新：
当路由发生改变的时候，，，当组件被复用的时候
 
路由离开：
未完成答题，离开页面，尽行确认，是------->离开，否--------->不离开
　　用途：
　　1.当用户没有支付时，提醒用户是否确定离开
　　2.答题系统，提交时
　　3.退出系统时
　　4.信息未保存时

 

路由进入：（在需要进入的组件中调用）

beforeRouteEnter (to, from, next) {

// 在渲染该组件的对应路由被 confirm 前调用

// 不！能！获取组件实例 `this`

// 因为当守卫执行前，组件实例还没被创建

 next((vm)=>{
//vm就是vue的实例，相当于this

           
 })

},

 

更新：（在复用的组件调用）

beforeRouteUpdate (to, from, next) {

// 在当前路由改变，该组件被复用时调用

// 可以访问组件实例 `this`

},

离开：(在离开的组件调用)

beforeRouteLeave (to, from, next) {

// 导航离开该组件的对应路由时调用

// 可以访问组件实例 `this`

}

 

案例1：beforeRouteUpdate

/*
    从a到b，，to为：b的路由信息
            from：a的路由信息
            next   b的路由信息
 
    问题：有一个是无法点击的
    */
    beforeRouteUpdate(to,from,next){
        // console.log(to);
        // console.log(next);
        this.name = to.params.name;
        this.price = to.params.price;
        //next根据to的path/name进行路由的跳转，如果不写next，当前路由不会执行
        //当前在a路由，再次点击a路由，不会发生跳转，因为没有让自己跳转，必须要用next
        next();
    },

案例2：beforeRouteLeave

/*
    从a到b    进行判断，符合条件进行跳转，不符合条件，不能跳转
    */
    beforeRouteLeave(to,from,next){
        // console.log(to);
        // console.log(this);
        var flag = confirm("请确认个人信息");//返回布尔值，确定为true，取消为false
        if(flag){
            next()//根据to的path/name进行跳转
        }else{
            this.$router.push("/find");
        }
 
    },

案例3：beforeRouteEnter

 //eg:商品列表页必须要登录才能进入，如果未登录，就跳转到登录页

    beforeRouteEnter(to,from,next){
        //访问不到this
        // console.log(this);
        // console.log(to);
        var status = false;
        next((vm)=>{
            console.log(vm);//小型的vue实例
            var flag = false;
            if(flag){
                next();//执行to的path/name
            }else{
                vm.$router.push("/login")
            }
        })
    }
 
}