一、导航守卫

导航守卫分为：全局守卫、组件导航守卫以及路由导航守卫。下面分别来进行讲解。

1. 全局守卫：

全局守卫有beforeEach 和afterEach ，即在跳转前和跳转后的导航守卫。

首先看下beforeEach，示例代码如下：

router.beforeEach((to, from) => {
  if (
    // 检查用户是否已登录
    !isAuthenticated &&
    // ❗️ 避免无限重定向
    to.name !== 'Login'
  ) {
    // 将用户重定向到登录页面
    return { name: 'Login' }
  }
})

如果beforeEach的回调函数中返回的是true或者什么都没返回，则跳转到默认的路由，否则跳转到返回的路由。

afterEach导航路由为已经改变完成后的守卫。示例代码如下：

router.afterEach(function(to,from){
  console.log('to:',to);
  console.log('from:',from);
})

3. 组件内导航守卫：

组件内导航守卫只能使用以下两个方法：

• onBeforeRouteLeave ：在离开当前路由前调用。如果返回false，将会取消路由离开。比如：

  beforeRouteLeave (to, from) {
    const answer = window.confirm('本页面还未保存，您确定要离开吗？')
    if (!answer) return false
  }
  

• onBeforeRouteUpdate ：在路由发生更新时调用，比如从/user/1 更新到/user/2 ，就会执行该守卫方法。一般这个方法用的比较少。

4. 路由导航守卫：

在定义路由的时候，可以指定beforeEnter导航守卫，示例代码如下：

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // reject the navigation
      return false
    },
  },
]

二、路由元信息

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段：

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true },
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false },
      }
    ]
  }
]