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

Posted 2020-12-14 xiaolinblog

导航守卫介绍

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

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

所谓后置导航守卫，是指跳转到下一页面（路由）之后可以进行对跳转之后的页面执行一些操作的机制。
由于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导航守卫文档