使用者無權導航到目標元件
使用者得先登入認證
顯示目標元件前，需要先獲得某些資料
離開元件前，需要先儲存修改，需要詢問使用者是否放棄修改
路由守衛返回乙個值observable / promise，以控制路由器的行為：
一般專案都會有多層路由和模組懶載入，因此在路由的每個層次上，我們都可以設定多個守衛。路由檢查順序：
在上面的過程中，如果模組是lazyload的，載入之前還會檢查canload()守衛。
檢查過程中任何乙個守衛返回false，其他未完成的守衛會被取消，整個導航就會被取消。
幾個路由守衛
守衛功能
canactivate
導航到某路由的情況
canactivatechild
導航到某子路由的情況
candeactivate
從當前路由離開的情況
resolve
路由啟用前獲取路由資料
canload
非同步導航到某特性模組（懶載入）
一般用來管理訪問者是否有許可權訪問該特性模組或元件;
在根模組下面建立乙個service資料夾，用來存放公共的service
}}複製**
然後開啟根模組的routing模組, 注入authguardservice：
import from
'@angular/core';
import from
'@angular/router';
import from
'./service/auth-guard.service';
,];@ngmodule()],
exports: [routermodule],
providers: [authguardservice]
})export
複製**
以上會使整個模組的訪問受限，如果要設定特定元件是否可以訪問，則需要注入到相應的特性模組的routing模組，方法相同
用非同步的方式等待伺服器答覆之前先停止導航，candeactivate方法提供了當前元件，當前activatedroute個routerstatesnapshot例項。 下面這個guard可以被所有元件復用
import from
'@angular/core';
import from
'@angular/router';
import from
'@angular/router';
export
inte***ce cancomponentdeactivate
@injectable()
export
class candeactivateservice implements candeactivate
}複製**
當然也可以單獨為某個元件建立屬於他自己的candeactivate-guard，建立完guard後，我們需要為元件建立他的candeactivate()方法，這個方法返回乙個observable或promise或boolean，最後加給routing模組對應route的candeactivate陣列中即可；
Vue路由守衛之路由獨享守衛
路由獨立守衛，顧名思義就是這個路由自己的守衛任務，就如同咱們lol，我們守衛的就是獨立一條路，保證我們這條路不要被敵人攻克 當然我們也得打團配合 在官方定義是這樣說的 你可以在路由配置上直接定義 beforeenter 守衛,這些守衛與全域性前置守衛的方法引數是一樣的。const router ne...
VueRouter 導航守衛 路由守衛
就是導航過程中各個階段的鉤子函式。分為 全域性導航守衛 路由導航守衛 元件導航守衛。在整個網頁中，只要發生了路由變化，就會觸發。全域性導航守衛主要包含兩個函式 beforeeach aftereach。在路由發生了改變，但是還沒有成功跳轉的時候會呼叫。router.beforeeach functi...
路由的前置路由守衛和後置路由守衛
aftereach beforeeach這兩個導航守衛的區別 vue router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中 全域性的,單個路由獨享的,或者元件級的。beforeeach全域性前置守衛當乙個導航觸發時，全域性前置守衛按照建立順序呼叫。每個守衛方...