路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说meta,是不是很多人恍然大悟,因为在项目中用到或者看到过呢?

  是的,路由元信息就是我们定义路由时配置的meta字段;那么这个meta的作用是什么呢?

  首先看一个场景:

    通常我们在开发网站或者移动应用的时候,我们通常会有网页权限验证的需求(别说你没有,你肯定有),这种需求一般是指需要登录后才可进入,也就是需要用户登录获取用户Token或者用户信息之后才可进入;当这个需求下来的时候,我们作为前端开发人员的第一反应是路由守卫啊,一个路由前置守卫通过判断to.path就可以解决;

    用to.path来判断做权限验证会有两个问题:    

    1:首先,如果需要做权限验证的页面很多呢?难道我们要通过if(to.path==='/' || to.path === '/home')这种方式来一个个的添加路径判断吗?

    2:然后,routes管理器中会有很多json对象,这种json对象我们通常把它叫做路由记录,路由记录是可以嵌套的,允许存在父子关系;我们用if来判断的时候,会有匹配不完全的问题,例如你匹配了/home,那么/home/list呢,这个将不会被匹配到;

    我们的理想状态下是假如我要限制了/home,那么不管你路径是/home/index也好还是/home/home也好,只要是home下来的子路由记录统统都需要登录后才能访问;

    这个时候我们就可以考虑用路由元信息meta来进行处理;

    首先简单的看一下页面效果:

  

  我们的路由管理器中的路由记录配置如下:

  

const routes=[
    {
        path:'/page1',
        component:page1,
        meta:{
            login:true
        },
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "computer",
                component: computer
            },
        ]
    },

    {
        path:"/page2",
        component:page2,
        meta:{
            login:false
        }
    },
]

  我们上面在meta中自定义login字段是标识当前路由是否需要验证token;

  然后我们的路由前置全局守卫可以这么写:

  

router.beforeEach((to, from, next) => {
   //定义token来模拟
    let token =“123456”
   //判断即将进入的路由是否需要验证
   if(to.meta.login){
     //如果即将进入的路由需要验证
    //并且token不存在的话,那么就跳转page2(登录页)
       if(!token){
           next("/page2");
      //如果需求验证token存在直接放行
       }else{
           next();
       }
    //如果不需要验证也是直接放行
   }else{
    next();
   }
})

  最后效果图如下:

    

  当然这只是路由元信息的功能其一,路由元信息其实有很多用途,类似于一个当前路由的全局变量,可以通过meta来进行判断操作;

vue-router之路由元信息的更多相关文章

  1. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

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

    一.函数的识别: 1.router.beforeEach:主函数.高阶函数.入口函数: 2.匿名参量函数:处理跳转过程中的附加逻辑 (to, from, next) => { if (to.ma ...

  3. VueJs(12)---vue-router(导航守卫,路由元信息)

    vue-router(导航守卫,路由元信息) 之前泄露两篇有关vue-router博客: VueJs(10)---vue-router(进阶1) VueJs(11)---vue-router(进阶2) ...

  4. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  5. vue-router路由元信息及keep-alive组件级缓存

    路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说meta,是不是很多人恍然大悟,因为在项目中用到或者看到过呢? 是的,路由元信息就是我们定义路由时配置的meta字段:那 ...

  6. vue-router 路由元信息 终于搞明白了路由元信息是个啥了

    vue-router 路由元信息:https://blog.csdn.net/wenyun_kang/article/details/70987840 终于搞明白了路由元信息是个啥了:https:// ...

  7. vue-router路由元信息详解

    一.官方文档 路由元信息:定义路由的时候可以配置 meta 字段 const router = new VueRouter({ routes: [ { path: '/foo', component: ...

  8. vue 路由元信息

    官方文档:路由meta元信息 前言: 在设置面包屑导航还有菜单栏的时候,路由的meta字段可以自定义我们需要的信息,然后路由跳转的时候,提供我们判断条件 文档: 定义路由的时候可以配置 meta 字段 ...

  9. Vue-admin工作整理(六):路由元信息

    路由源信息:每一个路由对象,可以配置一个meta字段,它里面可以存放一些我们定义的信息,比如说页面是否需要一个权限 to.meta && setTitle(to.meta.title) ...

随机推荐

  1. 【转】[Python小记] 通俗的理解闭包 闭包能帮我们做什么?

    https://blog.csdn.net/sc_lilei/article/details/80464645

  2. Keras实例教程(3)

    https://blog.csdn.net/baimafujinji/article/details/80705578

  3. java学习之- 线程运行状态

    标签(空格分隔): 线程运行状态 线程的运行状态: 如下是是我编写的一个图,大家可以作为参考: 1.new一个thread子类也是创建了一个线程: 2.创建完毕之后start()-----运行, 3. ...

  4. Ms Sql server 主键并发冲突解决办法

    问题原因,同事把表的自增长ID主键,改成是自定义的编号,没有严格的并发测试.在多线程同时插入数据时会引起主键冲突: 看了一些道友的文章,尝试了几个方法.经测试 使用 WITH(updlock)  可以 ...

  5. MyBatis 封装Map,返回不同实体的集合对象

    现在有一个需求,就是从100个表中获得任意表中的数据,按照正常的思维模式和处理方式, 我们首先会创建100个实体类(累死!),然后通过resultType一一对应实体类,这种方式简直...  那么我们 ...

  6. 数据结构C线性表现实

    linearList.h #ifndef _INC_STDIO_8787 #define _INC_STDIO_8787 #include <stdio.h> #include <m ...

  7. ValueError: Error when checking input: expected conv2d_1_input to have 4 dimensions, but got array with shape (60000, 28, 28)

    报错 Traceback (most recent call last): File "D:/PyCharm 5.0.3/WorkSpace/3.Keras/3.构建各种神经网络/3.CNN ...

  8. 牛客国庆集训派对Day3 B Tree(树形dp + 组合计数)

    传送门:https://www.nowcoder.com/acm/contest/203/B 思路及参考:https://blog.csdn.net/u013534123/article/detail ...

  9. SPOJ - VFMUL - Very Fast Multiplication FFT加速高精度乘法

    SPOJ - VFMUL:https://vjudge.net/problem/SPOJ-VFMUL 这是一道FFT求高精度的模板题. 参考:https://www.cnblogs.com/Rabbi ...

  10. HDU4578 线段树(区间更新 + 多种操作)和平方,立方

    参考:https://www.cnblogs.com/H-Vking/p/4297973.html 题意: 虽然是比较裸的线段树,但是比较麻烦,并且有很多细节需要考虑,对着别人的ac代码debug了一 ...