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

//使用鉤子函數(shù)對(duì)路由進(jìn)行權(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)限則可進(jìn)入，這里只是簡(jiǎn)單的模擬管理員權(quán)限而已
? ? ? ? role === 'admin' ? next() : next('/403');
? ? }else{
? ? ? ? // 簡(jiǎn)單的判斷IE10及以下不進(jìn)入富文本編輯器，該組件不兼容
? ? ? ? if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
? ? ? ? ? ? Vue.prototype.$alert('vue-quill-editor組件不兼容IE10及以下瀏覽器，請(qǐng)使用更高版本的瀏覽器查看', '瀏覽器不兼容通知', {
? ? ? ? ? ? ? ? confirmButtonText: '確定'
? ? ? ? ? ? });
? ? ? ? }else{
? ? ? ? ? ? next();
? ? ? ? }
? ? }
})

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

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

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

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

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