Vue路由对象属性 .meta $route.matched详解


Posted in Javascript onNovember 04, 2019

$route.fullPath

1 路由是:/path/:type真正路径是:/path/list

2 path匹配路径: /path/list

3 fullPath匹配路由: /path/:type

路由元信息 .meta

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   children: [
    {
     path: 'bar',
     component: Bar,
     // a meta field
     meta: { requiresAuth: true ,keepAlive:true}//1.权限 2.内存缓存,单页面切换
    }
   ]
  }
 ]
})

先理解什么是路由记录 : 路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

上方代码中的路由记录见下方:

//一级路由 
  {
   path: '/foo',
   component: Foo,
   children: [
    {
     path: 'bar',
     component: Bar,
     // a meta field
     meta: { requiresAuth: true ,keepAlive:true}//1.权限 2.内存缓存,单页面切换
    }
   ]
  }
 
 
//一级路由的子路由
 
  { path: 'bar',component: Bar,meta: { requiresAuth: true ,keepAlive:true } }
 
 
//两者都是  路由记录

1 定义路由的时候可以配置 meta 字段

2 根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录

3 一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。

4 检查路由记录中的 meta 字段 ,我们需要遍历 $route.matched

$route.matched

1 一个数组,包含当前路由的所有嵌套路径片段的路由记录

2 一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组

路由元信息 .meta $route.matched 搭配路由守卫 进行验证

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()
 }
})

以上这篇Vue路由对象属性 .meta $route.matched详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 #Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 #Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 #Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 #Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 #Javascript
vue双向绑定数据限制长度的方法
Nov 04 #Javascript
使用p5.js临摹动态图片
Nov 04 #Javascript
You might like
关于尾递归的使用详解
2013/05/02 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
php集成动态口令认证
2016/07/21 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
Express的路由详解
2015/12/10 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
2016/08/16 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
bat和python批量重命名文件的实现代码
2016/05/19 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Python 操作文件的基本方法总结
2017/08/10 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
django框架模板语言使用方法详解
2019/07/18 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
Python pickle模块实现对象序列化
2019/11/22 Python
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
超市国庆节促销方案
2014/02/20 职场文书
低碳环保演讲稿
2014/08/28 职场文书
财务部岗位职责范本
2015/04/14 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
Apache自带的ab压力测试工具的实现
2022/07/23 Servers