当前位置:首页 > 问答库 > Web基础知识 > 详情

路由守卫中页面跳转运用了哪些钩子函

来源:千锋教育

发布:syq

2022-10-26

Web基础知识 分类问答库

推荐答案

  应用场景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() //否则允许跳转 }

更多问题在线答疑

导师线上坐镇
解答个性化学习难题

立即提问

上一篇

零基础教你学前端-文本修饰之常用标签

下一篇

JavaScript:确定变量是否为整数的3种方法

相关问题

更多 >>
是否用过混合APP开发 前端引擎模板 forEach中的await 闭包的使用场景 什么是模块化思想? JS如何实现多线程?
热门问题
Web基础知识 Web培训机构 Web培训费用 Web培训时间 Web培训课程 Web培训就业 零基础学Web Web薪资待遇 Web学习路线

全国咨询热线400-811-9990