zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    [转载]应用系统架构设计
    带隐藏功能的菜单导航
    3 CSS 高级语法
    FarPoint Spread 基础知识
    端口映射工具
    2008年上半年信息系统项目管理师考试试题分析
    DateTime.Now
    华为战略部门研究山寨机决定出售手机部门
    网管必须掌握的八个DOS命令(转)
    智能机常见问题(新手必读)
  • 原文地址:https://www.cnblogs.com/feng9exe/p/11016480.html
Copyright © 2011-2022 走看看