vue项目路由导航守卫

学习目标：

vue项目路由导航守卫是什么？怎么使用？

---

学习内容：

1. 什么是路由导航守卫
2. 怎么优雅的在项目中使用

---

学习时间：

10分钟

---

学习产出：

什么是路由守卫？

vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
每个守卫接受三个参数：

to:即将要进入的目标路由对象
from:当前导航正要离开的路由
next:一定要调用该方法来resolve这个钩子。
执行效果依赖next方法的调用参数。
如果next函数没有执行或是传入了false等值，这个跳转就会被终止掉。

如何使用？

提示：登录时需localStorage.setItem("DEFAULT_TOKEN", JSON.stringify(this.formData))

import Vue from "vue";
import Router from "vue-router";
import routes from './routes';

Vue.use(Router);

const router = new Router({
    // mode: "hash",
    routes
});


router.beforeEach((to, from, next) => {
    let getInfo = localStorage.getItem('DEFAULT_TOKEN') || ''
    if (!to.meta.notLogin) {
        if (getInfo) {
            next()
        } else {
            next({
                path: '/login'
            })
        }
    } else {
        next()
    }
})

export default router

这样就可以了，快去试试吧~