路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说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. 掌握 Maven 私服

    前言 在 Java EE 开发中,我们使用 Maven 构建工具主要来管理项目的第三方库的依赖,以及公司内部其他项目服务的依赖.因此 Maven 私服就是必不可少的一环,本文主要对 Maven 私服的 ...

  2. 约瑟夫环问题:有n个人围成一圈,顺序排号。从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来第几号的那位。

    首先,我最大的学习来源不是百度而是我群友~~在这里表白一波我热爱学习的群友们!然后今天群里突然有人提出了题目的这个问题:有n个人围成一圈,顺序排号.从第一个人开始报数(从1到3报数),凡报到3的人退出 ...

  3. 推荐一个比 ls 命令速度快 100 倍的文件目录浏览神器

    本文首发于:微信公众号「运维之美」,公众号 ID:Hi-Linux. 「运维之美」是一个有情怀.有态度,专注于 Linux 运维相关技术文章分享的公众号.公众号致力于为广大运维工作者分享各类技术文章和 ...

  4. 洛谷 P2341 【受欢迎的牛】

    题库:洛谷 题号:2341 题目:受欢迎的牛 link:https://www.luogu.org/problemnew/show/P2341 思路:因为奶牛的爱慕关系具有传递性,所以每个环(强连通分 ...

  5. list 分组

    Map<Long, List<LogDataVo>> corpIdMap = list.stream().collect(Collectors.groupingBy(LogDa ...

  6. [NOI2009]诗人小G 四边形优化DP

    题目传送门 f[i] = min(f[j] + val(i,j); 其中val(i,j) 满足 四边形dp策略. 代码: #include<bits/stdc++.h> using nam ...

  7. hdu 1028 Ignatius and the Princess III 母函数

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  8. codeforces E. Phone Talks(dp)

    题目链接:http://codeforces.com/contest/158/problem/E 题意:给出一些电话,有打进来的时间和持续的时间,如果人在打电话,那么新打进来的电话入队,如果人没有打电 ...

  9. MPA JS CSS预处理方案

    1.WebPack 添加配置文件webpack.config.js,直接在当前目录运行 webpack. var basepath = '/root/webapps/happ'; var glob = ...

  10. 如何设置FreePBX的数据库用户可以通过远程来连接Mysql数据库?

    要满足mysql允许通过除了本机外的主机进行使用客户端连接的方法: 要设置root用户允许通过外网用户进行连接访问的操作方法: 1.首先先改mysql的配置文件 将绑定的#bind-address = ...