首页 > 其他 > 详细

route中的to.matched的运用

时间:2020-06-30 20:18:22      阅读:63      评论:0      收藏:0      [点我收藏+]

运用场景一:做登录判断

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.siteCode
        next({
          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返回的是一个多层路由组成的数组,只要改数组里面有保护父路由路径,就设置高亮

route中的to.matched的运用

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!