route中的to.matched的运用

文章转自：

https://www.cnblogs.com/qdlhj/p/13215086.html

运用场景一：做登录判断

1、vue项目当中通常都是通过设置routes配置项来控制路由跳转，例如设置

routes:
[{path: '/cinema',redirect: '/page/cinema',component: BlankLayout,meta: { title: '影院' , requiresAuth: true}children: [{path: '/cinema/plan',name: 'cinemaPlan',component: () => import('./views/cinema/Plan'),meta: { title: '影院排期' }},{path: '/cinema/cinemaDetail',name: 'cinemaDetail',component: () => import('./views/cinema/CinemaDetail'),meta: { title: '影院详情' }}]}
]

接着在名为perssion.js的文件中结合路由守卫，进行登陆验证，另外这里如果用户登录成功之后，token会默认放在vuex中的getters中,所以在导航守卫中判断对应getters是否存在，如果存在，证明用户已登录，允许用户进入该路由。否则就跳转登陆页，并把当前页的路由座位query参数传递给login页面：

to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title}`))if (to.matched.some(record => record.meta.requiresAuth)) {// this route requires auth, check if logged in// if not, redirect to login page.if (!store.getters.token) {next({path: '/login',query: { redirect: to.fullPath }})} else {if (to.query.siteCode) {next()return}if (from.query.siteCode) {const query = JSON.parse(JSON.stringify(to.query))query.siteCode = from.query.siteCodenext({path: to.path,query: query})} else {next() // 确保一定要调用 next()}}}

2.主要说明下为什么要使用遍历to.matched数组判断meta的requiresAuth字段，而不直接使用to.meta.requiresAuth来判断，首先例子当中给的是cinema,也即是1级路由设置了requiresAuth.而cinemaPlan没有设置。假设两种情况：

　前提：vue路由匹配时会同时匹配满足情况的所有路由，即如果路由是‘/cinema/plan’的话，‘/cinema’也会触发。另外如果较高等级的路由需要登录控制的话，它所有的嵌套路由都是基本需要登录控制的。

（1）cinema具有登录控制，而cinemaPlan 没有。如果用户正常点击路由跳转的话，它必然是先进一级路由，再去二级路由，一级路由实现登录控制，利用to.meta是能够满足的，注意这里是用户正常点击，但是假如有用户直接改变url地址的话去访问cinemaPlan的话，则需要给cinemaPlan路由添加requiresAuth字段，同理也需要给cinemaDetail添加字段，如果路由比较多的话，就会很麻烦。

（2）cinema没有登录控制，而cinemaPlan有。这种情况确实不怕用户直接改变url访问二级路由了，但是同样如果过多二级路由，也是需要设置许多requiresAuth。

所以，为了方便，直接遍历to.matched数组，该数组中保存着匹配到的所有路由信息。就该例而言，访问cinema时，matched数组长度为1，访问cinemaPlan时，matched数组长度为2，即保存着‘/cinema’以及‘/cinema/plan’。其实啰嗦了这么多，直接使用to.meta判断字段也可以，就是需要给所有需要控制的路由添加requiresAuth。而to.matched则只需要给较高一级的路由添加requiresAuth即可，其下的所有子路由不必添加。

运用场景二：侧边栏路由导航

当一个模块下面有多个子路由时，切换到子路由的同时，这个模块依然要处于高亮状态，这个时候，可以利用路由的to.matched 属性，to.matched返回的是一个多层路由组成的数组，只要改数组里面有保护父路由路径，就设置高亮

if (to.matched[1] && (to.matched[1].name === 'ScreenControl')) {// 存在二级路由且名字为啥
}

总结：当有用到嵌套路由时，该模块下，所有嵌套路由都要用到某个属性进行判断，这时候可以通过设置判断共同父路由进行属性设置

route中的to.matched的运用相关推荐

React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
python flask route中装饰器的使用
问题:route中的装饰器为什么感觉和平时使用的不太一样,装饰器带参数和不太参数有什么区别?被修饰的函数带参数和不带参数有什么区别? 测试1:装饰器不带参数,被修饰的函数也不带参数. def log( ...
React route中exact用法
在学习自己配置路由是遇到这个问题,就是 <Route path='/goods' component={Goods} /> <Route path='/goods/:id' comp ...
route中如何禁止ip_都说IP当道，看看游戏中IP是如何建设的
IP建设是一个要素众多,适用领域广泛的话题,而我今天要分享的是它在游戏领域中经常会被关注的两个模块:人设与世界观. 这里有两本很有趣的书,左侧这一本叫<完美人设>,副标题为"如何 ...
如何在 ASP.NET Core 中使用 Route 特性
ASP.NET Core 中的 Route 中间件的职责在于将 request 匹配到各自 Route 处理程序上,Route 分两种:基于约定和基本特性模式. 基于约定模式的Route采用集 ...
yolov4中带groups的route理解
1. yolov4-tiny配置文件示意图其中yolov4-tiny.cfg文件[route]中多出了groups与group_id,之前的route都是只有layers参数,这里的groups与g ...
Angular2 RC6 Route学习
前言 Angularjs2终于最新的week Conf没有显示会出现RC7,也就意味着下次就是stable了,不会有break changes了.闲话少说. 路由的功能在SPA应用的地位无可置疑,an ...
Ext JS 6.7 中文文档：路由的使用
本篇目录前言正文通过路由控制应用路由可以做什么路由不可以做什么什么是 Hash? 在你的应用中实现路由更新 Hash 默认 Token 带参数的 Hash Hash 参数格式化 Rout ...
asp.net MVC 路由机制 Route
1:ASP.NET的路由机制主要有两种用途: -->1:匹配请求的Url,将这些请求映射到控制器 -->2:选择一个匹配的路由,构造出一个Url 2:ASP.NET路由机制与URL重写的区 ...

route中的to.matched的运用

route中的to.matched的运用相关推荐

最新文章

热门文章