路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说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. C#开发BIMFACE系列4 服务端API之源上传文件

    在注册成为BIMFACE的应用开发者后,要能在浏览器里浏览你的模型或者获取你模型内的BIM数据, 首先需要把你的模型文件上传到BIMFACE.根据不同场景,BIMFACE提供了丰富的文件相关的接口. ...

  2. rabbit - producer的confirm和consumer的ack模式

    本篇和大家分享的是关于rabbit的生产和消费方的一些实用的操作:正如文章标题,主要内容如producer的confirm和consumer的ack,这两者使用的模式都是用来保证数据完整性,防止数据丢 ...

  3. unity编辑器扩展_08(创建自定义窗口)

    代码: using UnityEngine;using UnityEditor; public class MyWidow : EditorWindow{    [MenuItem("Win ...

  4. awrcrt更新到2.1(重大更新)

    awrcrt更新到了2.1 awrcrt迎来了最近一年的最大一次更新,从2.03直接跳跃了2.1版本.本次更新,给awrcrt带了全面的改变. 最主要的更新内容是什么呢?请看 更新了图表javascr ...

  5. Django + JQuery + ajax实时显示数据

    1 创建django项目 :Visualization and  APP :Demo >>django-admin startproject Visualization >>p ...

  6. 微擎 人人商城 增加营收比统计(即每个订单支持多少,收入多少,总得统计)多表联合查询, sum统计一对多总和 联合 group by 进行查询

    在公司要求增加一项统计,即营收比, 每个订单收入多少 支出多少,盈利多少,盈利比都详细记录下来. 在做完针对单个订单的营收比之后(支出储存在 ewei_shop_order_external_pay ...

  7. codeforce440C-Maximum splitting-规律题

    题意:问一个数最多可以变成几个合数的和: 思路: 时刻提醒自己再看到题目的时候的所作所为,该找规律找规律,想什么ksm,质数判断开根号. 除了1.2.3.5.7.11外,其余的数都可以通过4,6,9获 ...

  8. hihocoder #1616 : 是二叉搜索树吗?(模拟题)

    题目链接:http://hihocoder.com/problemset/problem/1616 题解:就是简单的模拟一下至于如何判断是不是二叉搜索树可以通过中序遍历将每个点存下来看是不是递增的如果 ...

  9. 杭电2018暑假多校第一场 D Distinct Values hdu6301 贪心

    Distinct Values Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  10. CF1005C Summarize to the Power of Two 暴力 map

    Summarize to the Power of Two time limit per test 3 seconds memory limit per test 256 megabytes inpu ...