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 相关文章推荐
js DOM模型操作
Dec 28 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
Vue中使用vux的配置详解
May 05 Javascript
JavaScript的继承实现小结
May 07 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
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
php分页函数示例代码分享
2014/02/24 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
浅谈PHP表单提交(POST&GET&URL编/解码)
2017/04/03 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
python实现经纬度采样的示例代码
2020/12/10 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
工作会议欢迎词
2014/01/16 职场文书
婚前协议书范本
2014/04/15 职场文书
区域经理岗位职责
2015/02/02 职场文书
机器人总动员观后感
2015/06/09 职场文书
名人传读书笔记
2015/06/26 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书