• router.beforeEach、路由元信息、导航守卫与函数式编程


    一、函数的识别:

    1、router.beforeEach:主函数、高阶函数、入口函数;

    2、匿名参量函数:处理跳转过程中的附加逻辑

    (to, from, next) => {

      if (to.matched.some(record => record.meta.requiresAuth)) {

        // this route requires auth, check if logged in

        // if not, redirect to login page.

        if (!auth.loggedIn()) {

          next({

            path: '/login',

            query: { redirect: to.fullPath }

          })

        } else {

          next()

        }

      } else {

        next() // 确保一定要调用 next()

      }

    }

    3、next函数:不定参量函数

    根据匿名函数的处理结果决定跳转策略;

    由router.beforeEach定义并传给匿名函数。

    4、关系

    router.beforeEach创建next;

    router.beforeEach引用(to, from, next) =>void

    (to, from, next) =>void引用next;

    5、二阶段高阶函数

    高阶函数分为两个阶段

    二、路由元信息、导航守卫

    定义路由的时候可以配置 meta 字段:

    const router = new VueRouter({

      routes: [

        {

          path: '/foo',

          component: Foo,

          children: [

            {

              path: 'bar',

              component: Bar,

              // a meta field

              meta: { requiresAuth: true }

            }

          ]

        }

      ]

    })

    那么如何访问这个 meta 字段呢?

    首先,我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录

    例如,根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

    一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此,我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

    下面例子展示在全局导航守卫中检查元字段:

    router.beforeEach((to, from, next) => {

      if (to.matched.some(record => record.meta.requiresAuth)) {

        // this route requires auth, check if logged in

        // if not, redirect to login page.

        if (!auth.loggedIn()) {

          next({

            path: '/login',

            query: { redirect: to.fullPath }

          })

        } else {

          next()

        }

      } else {

        next() // 确保一定要调用 next()

      }

    })

    https://router.vuejs.org/zh/guide/advanced/meta.html

  • 相关阅读:
    unity, texture import settings
    unity, 最简单的additive shader
    unity, shader input and output
    unity, multi pass shader中的surface pass
    unity, 荧光效果(bloom)
    unity, 查看内置shader源码
    unity, Find References In Scene
    unity 主循环
    unity 显示帧率
    HttpUrlConnection的setDoOutput与setDoInput的区别
  • 原文地址:https://www.cnblogs.com/feng9exe/p/11016480.html
Copyright © 2020-2023  润新知