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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
用js编写留言板
Mar 17 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
使用AutoJs实现微信抢红包的代码
Dec 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
PHP+DBM的同学录程序(3)
2006/10/09 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
浅谈php命令行用法
2015/02/04 PHP
为你总结一些php系统类函数
2015/10/21 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
php 可变函数使用小结
2018/06/12 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
python查找指定具有相同内容文件的方法
2015/06/28 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
python在不同条件下的输入与输出
2020/02/13 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
德国网上药房:Apotal
2017/04/04 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
生日派对邀请函
2014/01/13 职场文书
法学院方阵解说词
2014/01/29 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
Java Spring Lifecycle的使用
2022/05/06 Java/Android