vue 路由元信息

路由元信息

meta: { requiresAuth: true }meta后跟一个对象 固定的
requiresAuth(自定义)我们去自定义一段信息来去匹配对应的功能，比如验证登录(用户中心)了才能查看. 我们给用户中心路由加上这个标识，加了之后就需要验证是否是登录状态，如果是登录状态我们才能正常查看这个页面、
定义路由的时候可以配置 meta 字段
通过 meta 定义要验证的路由

const router = new Router({
  routes: [ 
    {
      path: '/user',
      component: User,
      children: [
        {
          path: '',
          name: 'user',
          component: Profile,
          meta: { requiresAuth: true }
        },
        {
          path: 'cart',
          name: 'user-cart',
          component: Cart,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

const isLogin = true;

router.beforeEach((to, from, next) => {
  NProgress.start()

  if (to.meta.requiresAuth && !isLogin) {
      next({
        name: 'login',
      })
  } else {
    next()
  }
  
})

或者

const router = new Router({
  routes: [
    {
      path: '/user',
      component: User,
      meta: { requiresAuth: true }
      children: [
        {
          path: '',
          name: 'user',
          component: Profile
        },
        {
          path: 'cart',
          name: 'user-cart',
          component: Cart
        }
      ]
    }
  ]
})

const isLogin = true;

router.beforeEach((to, from, next) => {
  NProgress.start()
  //matched 获取所有的路由 some去遍历meta.requiresAuth这个路由信息
  if (to.matched.some(record => record.meta.requiresAuth) && !isLogin) {
      next({ 
        name: 'login',  //如果不是登录状态 去登录页面 扩展 通过数据批量 router-link
      })
  } else {
    next()
  }
})