应用场景1

　　可进行一些页面跳转前处理，例如判断需要登录的页面进行拦截，做登录跳转!! router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { //判断该路由是否需要登录权限 if (cookies('token')) { //通过封装好的cookies读取token，如果存在，name接下一步如果不存在，那跳转回登录页 next()//不要在next里面加"path:/",会陷入死循环 } else { next({ path: '/login', query: {redirect: to.fullPath}//将跳转的路由path作为参数，登录成功后跳转到该路由 }) } } else { next() } })

　　应用场景2

　　进入页面登录判断、管理员权限判断、浏览器判断 //使用钩子函数对路由进行权限跳转 router.beforeEach((to, from, next) => { const role = localStorage.getItem('ms_username'); if(!role && to.path !== '/login'){ next('/login'); }else if(to.meta.permission){ // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已 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(); } } })

　　应用场景3

　　当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转 beforeRouteLeave (to, from, next) { //判断是否弹出框的状态和保存信息与否 if (this.dialogVisibility === true) { this.dialogVisibility = false

　　//关闭弹出框 next(false)

　　//回到当前页面, 阻止页面跳转 }else if(this.saveMessage === false) { alert('请保存信息后退出!') //弹出警告 next(false)

　　//回到当前页面, 阻止页面跳转 }else { next() //否则允许跳转 }