$route.matched
<router-linkclass="icon-go":to="{ name: '首页'}"v-if="$route.matched[0].path=='/category'"></router-link><span class="icon-go" @click="$router.go(-1)" v-else></span><slot name="title"></slot> </header> </template> ```
$route.path
类型: string
字符串,对应当前路由的路径,总是解析为绝对路径,如 /foo/bar。
$route.params
类型: Object
一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。
$route.query
类型: Object
一个key/value 对象,表示 URL 查询参数。例如,对于路径/foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。
$route.matched
类型:Array
一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
const router = new VueRouter({routes: [// 下面的对象就是路由记录{ path: '/foo', component: Foo,children: [// 这也是个路由记录{ path: 'bar', component: Bar }]}]
})
当 URL 为 /foo/bar,$route.matched 将会是一个包含从上到下的所有对象 (副本)。
$route.fullPath
路由是:/path/:type真正路径是:/path/list
path匹配路径: /path/list
fullPath匹配路由: /path/:type
路由元信息 .meta
const router = new VueRouter({routes: [{path: '/foo',component: Foo,children: [{path: 'bar',component: Bar,// a meta fieldmeta: { requiresAuth: true ,keepAlive:true}//1.权限 2.内存缓存,单页面切换}]}]
})
先理解什么是路由记录 : 路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
上方代码中的路由记录见下方:
//一级路由 {path: '/foo',component: Foo,children: [{path: 'bar',component: Bar,// a meta fieldmeta: { requiresAuth: true ,keepAlive:true}//1.权限 2.内存缓存,单页面切换}]}//一级路由的子路由{ path: 'bar',component: Bar,meta: { requiresAuth: true ,keepAlive:true } }//两者都是 路由记录
定义路由的时候可以配置 meta 字段
根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录
一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。
检查路由记录中的 meta 字段 ,我们需要遍历 $route.matched
$route.matched
一个数组,包含当前路由的所有嵌套路径片段的路由记录
一个路由匹配到的所有路由记录会暴露为 $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()}
})
借鉴 添加链接描述
最新文章
- 中科创星米磊:从五个方向筛选“硬科技”企业
- 修改Kali Linux终端主题
- 0bjective-c 之 NSString 使用详解
- 电机与拖动单相变压器实验,江南大学物联网工程学院,实验报告
- win10雷电3接口驱动_“雷电3”接口知识大科普
- MATLAB无边框输出图像
- WPF 之 鼠标双击事件
- 代码整洁之道(二)优雅注释之道
- 页面引入多个echarts_JavaWeb之Echarts数据统计图表详细教程
- Cocos2d-x学习笔记(十一)动作
- 信息技术测试计算机疑难问题处理,江苏省中小学信息技术等级考试常见问题处理.doc...
- 自动化领域(控制领域)主要期刊汇总整理(SCI和EI)
- postman中变量设置
- MySQL - 5.7.31 - winx64 安装教程
- copy复制的时候提示y
- 【网络】H3C 交换机telnet查看端口流量Python小工具
- 守得住孤独,把得住清欢
- 做事必须搞清10个顺序之我想7.发展:先站住,再站高!
- 为什么ThinkPad国行版这么贵?
- 文本生成图像工作简述2--常用数据集分析与汇总
热门文章
- 产品生命周期管理PLM技术研究
- 肿么用photoshop将位图转化成矢量图
- Android集成腾讯Bugly和简单使用
- 51单片机(十六)—— 定时器0和定时器1寄存器介绍及功能描述
- 电大管理英语4计算机期末考试,2021国家开放大学电大本科《管理英语4》期末试题及答案(试卷号:1389)...
- 南京财经的计算机科学与技术,2021年南京财经大学计算机科学与技术(081200)考研专业目录_硕士研究生考试范围 - 学途吧...
- cocos creator 广告控制脚本
- 郑捷《机器学习算法原理与编程实践》学习笔记(第一章 机器学习基础)
- Brain Predicted Age (二)
- 一学就会的 WordPress 实战课