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 相关文章推荐
jquery异步跨域访问代码
Jun 28 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
完美解决js传递参数中加号和&号自动改变的方法
Oct 11 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 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
提问的智慧
2006/10/09 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python虚拟环境项目实例
2017/11/20 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
python求最大连续子数组的和
2018/07/07 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
详解python tkinter模块安装过程
2020/01/06 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
技校生自我鉴定范文
2013/09/26 职场文书
协议书与合同的区别
2014/04/18 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
个人作风建设总结
2014/10/23 职场文书
作文批改评语
2014/12/25 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python