Vue Router 路由守卫的初步使用

示例代码

代码参考：https://www.cnblogs.com/elfpower/p/9230528.html
由于网上大部分关于路由守卫的只给出局部代码，为了方便刚接触路由守卫的小伙伴快速上手，故给出较为全面的代码

routes: [{
      path: '/index',
      name: 'IndexPage',
      component: IndexPage
    }, 
    {
      path: '/login',
      name: 'LoginPage',
      component: LoginPage
    },
    {
      path: '/list',
      name: 'listPage',
      component: ListPage
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
// 全局路由守卫
router.beforeEach((to, from, next) => {
  const nextRoute = ['listPage'] // 需要登录后才能访问的页面
  let isLogin = window.sessionStorage.getItem('isLogin')  // 判断是否登录，这里使用sessionStorage进行存储登录状态
  if (nextRoute.indexOf(to.name) >= 0) { // 检测即将访问的页面是否需要登录
    if (!isLogin) { // 如果未登录（本地存储无用户数据），并且要跳到登录页面
      router.push({
        name: 'LoginPage',
        params: {redirect: to.fullPath}  
      })
    }
  }
 
  if (to.name === 'LoginPage') {
    if (isLogin) { // 已登录状态；当路由到 LoginPage 时，跳转至 listPage
      next('/list')
      return
    }
  }
  next() // 必须使用 next ,执行效果依赖 next 方法的调用参数
})

关于前置守卫形参

参考Vue Router官网：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局前置守卫

to：Route: 即将要进入的目标 路由对象

to对象结构如下，暂时能用到的属性有fullPath和name

to: {
	// 即将进入的路径
	fullPath: "/list"
	
	hash: ""
	​
	matched: Array [ {…} ]
	​
	meta: Object {  }
	​// 即将进入路径对应路由的name
	name: "listPage"
	​
	params: Object {  }
	​
	path: "/list"
	​
	query: {}
}

from：Route: 当前导航正要离开的路由

同to

from: {
	// 即将离开的路径
	fullPath: "/list"
	
	hash: ""
	​
	matched: Array [ {…} ]
	​
	meta: Object {  }
	​// 即将离开路径对应路由的name
	name: "listPage"
	​
	params: Object {  }
	​
	path: "/list"
	​
	query: {}
}

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

官网原文：

1. next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
2. next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
3. next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
4. next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

【以上内容通过极简化汇总，并由个人整理所得，如有错误，希望留言提出，大家一起共同学习。】