vue-router之路由元信息
路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说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之路由元信息的更多相关文章
- vue进阶:vue-router之导航守卫、路由元信息、路由懒加载
1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...
- router.beforeEach、路由元信息、导航守卫与函数式编程
一.函数的识别: 1.router.beforeEach:主函数.高阶函数.入口函数: 2.匿名参量函数:处理跳转过程中的附加逻辑 (to, from, next) => { if (to.ma ...
- VueJs(12)---vue-router(导航守卫,路由元信息)
vue-router(导航守卫,路由元信息) 之前泄露两篇有关vue-router博客: VueJs(10)---vue-router(进阶1) VueJs(11)---vue-router(进阶2) ...
- Vue router 全局路由守卫
记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...
- vue-router路由元信息及keep-alive组件级缓存
路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说meta,是不是很多人恍然大悟,因为在项目中用到或者看到过呢? 是的,路由元信息就是我们定义路由时配置的meta字段:那 ...
- vue-router 路由元信息 终于搞明白了路由元信息是个啥了
vue-router 路由元信息:https://blog.csdn.net/wenyun_kang/article/details/70987840 终于搞明白了路由元信息是个啥了:https:// ...
- vue-router路由元信息详解
一.官方文档 路由元信息:定义路由的时候可以配置 meta 字段 const router = new VueRouter({ routes: [ { path: '/foo', component: ...
- vue 路由元信息
官方文档:路由meta元信息 前言: 在设置面包屑导航还有菜单栏的时候,路由的meta字段可以自定义我们需要的信息,然后路由跳转的时候,提供我们判断条件 文档: 定义路由的时候可以配置 meta 字段 ...
- Vue-admin工作整理(六):路由元信息
路由源信息:每一个路由对象,可以配置一个meta字段,它里面可以存放一些我们定义的信息,比如说页面是否需要一个权限 to.meta && setTitle(to.meta.title) ...
随机推荐
- 【转】[Python小记] 通俗的理解闭包 闭包能帮我们做什么?
https://blog.csdn.net/sc_lilei/article/details/80464645
- Keras实例教程(3)
https://blog.csdn.net/baimafujinji/article/details/80705578
- java学习之- 线程运行状态
标签(空格分隔): 线程运行状态 线程的运行状态: 如下是是我编写的一个图,大家可以作为参考: 1.new一个thread子类也是创建了一个线程: 2.创建完毕之后start()-----运行, 3. ...
- Ms Sql server 主键并发冲突解决办法
问题原因,同事把表的自增长ID主键,改成是自定义的编号,没有严格的并发测试.在多线程同时插入数据时会引起主键冲突: 看了一些道友的文章,尝试了几个方法.经测试 使用 WITH(updlock) 可以 ...
- MyBatis 封装Map,返回不同实体的集合对象
现在有一个需求,就是从100个表中获得任意表中的数据,按照正常的思维模式和处理方式, 我们首先会创建100个实体类(累死!),然后通过resultType一一对应实体类,这种方式简直... 那么我们 ...
- 数据结构C线性表现实
linearList.h #ifndef _INC_STDIO_8787 #define _INC_STDIO_8787 #include <stdio.h> #include <m ...
- 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 ...
- 牛客国庆集训派对Day3 B Tree(树形dp + 组合计数)
传送门:https://www.nowcoder.com/acm/contest/203/B 思路及参考:https://blog.csdn.net/u013534123/article/detail ...
- SPOJ - VFMUL - Very Fast Multiplication FFT加速高精度乘法
SPOJ - VFMUL:https://vjudge.net/problem/SPOJ-VFMUL 这是一道FFT求高精度的模板题. 参考:https://www.cnblogs.com/Rabbi ...
- HDU4578 线段树(区间更新 + 多种操作)和平方,立方
参考:https://www.cnblogs.com/H-Vking/p/4297973.html 题意: 虽然是比较裸的线段树,但是比较麻烦,并且有很多细节需要考虑,对着别人的ac代码debug了一 ...