zoukankan      html  css  js  c++  java
  • route中的to.matched的运用

    运用场景一:做登录判断

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

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

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

  • 相关阅读:
    Call KernelIoControl in user space in WINCE6.0
    HOW TO:手工删除OCS在AD中的池和其他属性
    关于新版Windows Server 2003 Administration Tools Pack
    关于SQL2008更新一则
    微软发布3款SQL INJECTION攻击检测工具
    HyperV RTM!
    OCS 2007 聊天记录查看工具 OCSMessage
    CoreConfigurator 图形化的 Server Core 配置管理工具
    OC 2007 ADM 管理模板和Live Meeting 2007 ADM 管理模板发布
    Office Communications Server 2007 R2 即将发布
  • 原文地址:https://www.cnblogs.com/qdlhj/p/13215086.html
Copyright © 2011-2022 走看看