vue-router导航守卫的简单使用

82344699 2020-07-05

导航守卫介绍

导航守卫按发生的时间分为前置守卫和后置守卫,在导航准备发生时,触发前置守卫,导航结束之后,触发后置守卫。

所谓前置导航守卫,即在准备跳转到下一页面(路由)之前根据一定的条件可以对跳转目标进行改变的机制。
我们可以在此判断用户是否有权访问即将跳转的页面,用户是否登录来对页面跳转施加影响。
例如当用户未登录却要访问登录后才能使用的功能时,将用户引向登录页面。

所谓后置导航守卫,是指跳转到下一页面(路由)之后可以进行对跳转之后的页面执行一些操作的机制。
由于vue非常适合前后端分离的单页面应用,经常存在嵌套路由,页面由一个大的框架(母版)和一些局部组件组成,路由的跳转往往也只是改变网页局部,为了在跳转到下一个页面之后,上一个页面的设置不影响下一个页面,我们可能需要通过后置守卫恢复一些默认设置,最常见的是设置滚动条回到顶端,若上一页面产生了一些不会自动关闭的浮动的轻通知,可以在后置守卫关闭。

简单示例

// routes 为一个路由列表,写在单独的页面
Vue.use(Router)
const router = new Router({
  routes,
  mode: ‘history‘
})

// 配置前置路由守卫
router.beforeEach((to, from, next) => {
  // 如果一切正常,直接调用 next() 
  next()
  // 若用户没有登录,可以将用户引向登录页面,name 为配置的路由名称
  next({name: ‘login‘})
  // 其他情况
})

// 配置后置路由守卫
router.afterEach((to,from) => {
  // 设置滚动条回到顶端
  window.scrollTo(0, 0)
  // 其他操作
})

注:from 是上一个路由,to 是下一个路由

参考:vue-router导航守卫文档

相关推荐