导航守卫 的使用 模板

• 一、什么是导航守卫？

正如其名，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)
        }
    }
});