• 一、什么是导航守卫？

正如其名，vue-router
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

• 导航守卫的三个参数

to：将要访问的路由信息对象
from：将要离开的路由信息对象
next：函数
调用next()表示放行，允许这次路由导航
调用next(false)表示不放行，不允许此次路由导航
调用next({routerPath})表示导航到此地址，一般情况用户未登录时，会导航到登陆界面

提示：
该函数在导航守卫中可出现多次，但是只能被调用一次!!!

• 模拟登录注册案例

// 模拟是否登录（true为登录，false为未登录）
let token = true
router.beforeEach((to, from, next) => {// 判断有没有登录if (!token) {// 如果没有登录，并且是跳转至登录页if (to.name == "Login") {// 直接跳转next();} else {// 否则直接强制跳转至登录页router.push('/login')}} else {// 如果已经登录，并且不是跳转至登录页if (to.name !== "Login") {// 直接跳转next();} else {// 否则直接强制跳转至上一个页面router.push(from.path)}}
});