精华内容
下载资源
问答
  • 路由守卫

    2021-01-15 07:37:37
    路由守卫就是用来对路由的鉴权,在路由守卫中判断你要进入的页面,是否需要登录才能进入,如果不需要就直接放行,如果需要就对它做一些操作,路由守卫有三种: 全局路由守卫 , 组件内的路由守卫 , 路由独享守卫 每个守卫...

    路由守卫

    路由守卫就是用来对路由的鉴权,在路由守卫中判断你要进入的页面,是否需要登录才能进入,如果不需要就直接放行,如果需要就对它做一些操作,路由守卫有三种:
    全局路由守卫 , 组件内的路由守卫 , 路由独享守卫

    每个守卫方法接收三个参数:
    to:即将进入路由的信息
    from:离开路由的信息
    next():是否要继续进入路由(如果不加页面就不会显示)
    next("/login") 进入指定的组件的钩子函数

    全局路由守卫

    可以使用 router.beforeEach 注册一个全局前置守卫:

    router.beforeEach((to, from, next) => {
      // ...
    })
    //全局前置守卫,在进入路由之前会触发
    

    全局后置钩子

    router.afterEach((to, from) => {
      // ...
    })
    //全局后置钩子,在离开路由时触发
    

    路由独享守卫

    你可以在路由配置上直接定义 beforeEnter 守卫:

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

    组件内的守卫

    可以在路由组件内直接定义以下路由导航守卫:

    • beforeRouteEnter
    • beforeRouteUpdate
    • beforeRouteLeave
    const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由前调用
      },
      beforeRouteUpdate (to, from, next) {
        // 在当前路由参数改变时调用
       
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
      }
    }
    

    导航解析流程

    • 导航被触发。
    • 在失活的组件里调用 beforeRouteLeave 守卫。
    • 调用全局的 beforeEach 守卫。
    • 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
    • 在路由配置里调用 beforeEnter。
    • 解析异步路由组件。
    • 在被激活的组件里调用 beforeRouteEnter。
    • 调用全局的 beforeResolve 守卫 (2.5+)。
    • 导航被确认。
    • 调用全局的 afterEach 钩子。
    • 触发 DOM 更新。
    • 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,703
精华内容 1,481
关键字:

路由守卫