如何通过Vue路由实现登录页面访问拦截？

本文共计914个文字，预计阅读时间需要4分钟。

一、概述在项目开发中，每次路径切换或页面刷新时，都需要判断用户是否已登录。前端可以通过Vue-router提供的导航钩子进行判断，后端也会进行相应的判断。我们前端尽量进行判断，以提高用户体验。

Vue-router 导航钩子：- 全局前置守卫：全局导航解析之前，判断用户是否已登录。- 全局解析守卫：路由跳转过程中，判断用户是否已登录。- 全局后置钩子：路由跳转之后，进行一些操作。

一、概述

在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，前端可以判断，后端也会进行判断的，我们前端最好也进行判断。

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数：

1、to:即将要进入的目标路由对象；

2、from:当前导航即将要离开的路由对象；

3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。

next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由

二、路由导航守卫实现登录拦截

这里用一个空白的vue项目来演示一下，主要有2个页面，分别是首页和登录。

访问首页时，必须要登录，否则跳转到登录页面。