router.beforeEach((to, from, next) => {
? ? if (to.meta.requireAuth) {
? ? ? ? //判斷該路由是否需要登錄權(quán)限
? ? ? ? if (cookies('token')) {
? ? ? ? ? ? //通過封裝好的cookies讀取token，如果存在，name接下一步如果不存在，那跳轉(zhuǎn)回登錄頁
? ? ? ? ? ? next()//不要在next里面加"path:/",會陷入死循環(huán)
? ? ? ? }
? ? ? ? else {
? ? ? ? ? ? next({
? ? ? ? ? ? ? ? path: '/login',
? ? ? ? ? ? ? ? query: {redirect: to.fullPath}//將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
? ? ? ? ? ? })
? ? ? ? }
? ? }
? ? else {
? ? ? ? next()
? ? }
})

//使用鉤子函數(shù)對路由進行權(quán)限跳轉(zhuǎn)
router.beforeEach((to, from, next) => {
? ? const role = localStorage.getItem('ms_username');
? ? if(!role && to.path !== '/login'){
? ? ? ? next('/login');
? ? }else if(to.meta.permission){
? ? ? ? // 如果是管理員權(quán)限則可進入，這里只是簡單的模擬管理員權(quán)限而已
? ? ? ? role === 'admin' ? next() : next('/403');
? ? }else{
? ? ? ? // 簡單的判斷IE10及以下不進入富文本編輯器，該組件不兼容
? ? ? ? if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
? ? ? ? ? ? Vue.prototype.$alert('vue-quill-editor組件不兼容IE10及以下瀏覽器，請使用更高版本的瀏覽器查看', '瀏覽器不兼容通知', {
? ? ? ? ? ? ? ? confirmButtonText: '確定'
? ? ? ? ? ? });
? ? ? ? }else{
? ? ? ? ? ? next();
? ? ? ? }
? ? }
})

const router = new VueRouter({
? routes: [
? ? {
? ? ? path: '/foo',
? ? ? component: Foo,
? ? ? beforeEnter: (to, from, next) => {
? ? ? ? // ...
? ? ? }
? ? }
? ]

const Foo = {
? template: `...`,
? beforeRouteEnter (to, from, next) {
? ? // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
? ? // 不！能！獲取組件實例 `this`
? ? // 因為當鉤子執(zhí)行前，組件實例還沒被創(chuàng)建
? },
? beforeRouteUpdate (to, from, next) {
? ? // 在當前路由改變，但是該組件被復(fù)用時調(diào)用
? ? // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
? ? // 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
? ? // 可以訪問組件實例 `this`
? },
? beforeRouteLeave (to, from, next) {
? ? // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
? ? // 可以訪問組件實例 `this`
? }

beforeRouteLeave (to, from, next) {
? window.clearInterval(this.timer) //清楚定時器
? next()
}

?beforeRouteLeave (to, from, next) {
?//判斷是否彈出框的狀態(tài)和保存信息與否
?if (this.dialogVisibility === true) {
? ? this.dialogVisibility = false //關(guān)閉彈出框
? ? next(false) //回到當前頁面, 阻止頁面跳轉(zhuǎn)
? }else if(this.saveMessage === false) {
? ? alert('請保存信息后退出!') //彈出警告
? ? next(false) //回到當前頁面, 阻止頁面跳轉(zhuǎn)
? }else {
? ? next() //否則允許跳轉(zhuǎn)
? }

?beforeRouteLeave (to, from, next) {
? ? localStorage.setItem(name, content); //保存到localStorage中
? ? next()
}