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")
            }
        })
    }
 
}