路由守卫

已注销
93 阅读3分钟

研究背景
项目开发时，发现因为项目进行静态化，生成的参数，在利用this.$router.push方法跳转时不起作用。链接上存在参数，但是没有起作用，当重新刷新页面或者点击链接进入时，内容又实现静态化【苦恼啊】
最初想法
直接对静态化页面切换时进行刷新操作，因为是普遍的场景，直接统一处理，这样就想起了路由守卫。

一、导航守卫

一、全局守卫

1、全局前置守卫：router.beforeEach(to, from, next)
to：去哪个页面，路径
from：来自哪个页面，路径
next：执行方法resolve，决定页面是否展示

  1. next()：调用直接进入下个页面，展示当前页面内容
  2. next(false)：截止跳转，相当于手动返回、浏览器后退，路由就变成from的地址。
  3. next('/')：跳转到其他页面，后面跟的就是对应跳转的路径。
  4. next方法被控制严格调用一次，不调用next的话钩子不会被解析，或者说页面不展示。 注意：router.beforeEach属于全局的，一步一调用；每次路由切换就会别调用。
    2、全局解析守卫：router.beforeResolve(to, from, next)
  5. 页面跳转，跳转的路由被解析，页面渲染成功，所调用的路由钩子。
  6. 场景：页面跳转成功，且内容被展示解析OK的时候。 3、全局后置钩子：router.afterEach(to, from)
  7. 进入页面完毕所调的钩子函数
  8. 参数不存在next方法，不能也不会改变导航本身
二、组件内守卫

组件内守卫三部曲：进入组件-->解析组件-->离开组件
0、beforeEnter(to, from, next)
beforeEnter直接写在组件的路由配置，进入一个组件之前，率先读取路由配置文件。
1、beforeRouteUpdate(to, from, next)

  1. 当路由配置解析，路由参数变化时，并没有重新加载组件，此时触发beforeRouteUpdate方法，更新了路由；
  2. 准确来讲的话，路由变化的是参数值，组件复用，此时访问组件能拿到【this】实例。 2、beforeRouteEnter(to, from, next)
  3. 当路由要进入之时，组件解析，在解析的组件中调用beforeRouteEnter；
  4. 守卫执行前，组件实例还没创建，此时是渲染组件，但是还没被confirm；
  5. 直接传递回调给next访问组件实例this，它是唯一的支持回调的守卫。
beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过vm，next的回调来处理实例
  })
}

3、beforeRouteLeave(to, from, next)

  1. 组件渲染完毕，想要离开之时；失活组件中调用的钩子；能够拿到【this】实例。
  2. beforeRouteLeave通常用来禁止用户未保存修改前突然离开，直接利用next(false)取消
beforeRouteLeave (to, from, next) {
 const answer = window.confirm('Do you really want to leave?')
 if (answer) {
   next()
 } else {
   next(false)
 }
}
三、路由守卫【生命周期】
  1. 输入链接，进入页面：beforeEach；
  2. 读取组件配置：beforeEnter；
  3. 路由参数改变，组件复用：beforeRouteUpdate；
  4. 组件进入前，解析路由：beforeRouteEnter；
  5. 组件离开，组件失活：beforeRouteLeave；
  6. 组件渲染，页面展示：beforeResolve；
  7. 关闭窗口，离开页面：afterEach； 特殊注意点：beforeRouteEnter唯一的传递组件实例的钩子，能够将实例通过next的回调函数来处理。
    最终的解决
    直接利用了window.locaton.href进行了页面跳转，这样在跳转过来时进行了页面刷新，直接解决问题~
avatar
文章
阅读
粉丝