前端面试——Vue篇（导航守卫）

1.为什么有导航守卫？

我们想通过直接访问一个url而去得到登录后的页面，这显然是不严谨的，为了让其严谨起来，我们通过设置路由路由导航守卫（也就是拦截），在登录之前做一个拦截判断。

2.所有不同类型的守卫都有三个参数：

to：即将要进入的路由对象

from：当前离开的路由

next：是一个方法，可以接收参数。这个方法是必须调用。如果不使用就跳转不过去。你可以吧next看做一个保安，必须要跟next打个招呼才可以通过。

---

next（）    ==> 就是告诉保安要过去，去哪儿里就是to

next（false）==> 可以不通过，中断跳转

next（'./XX'） ==>就意思是保安不让过，你可以去另外一个设置好的地方

---

 3.导航守卫有：

全局导航（全局情况下使用）：

Router.beforeEach

Router.afterEach

组件内导航（单独组件内使用）：

beforeRouteEnter

beforeRouteUpdate

beforeRouterLeave

路由独享（想在好几个组件内使用）：

beforeEnter

补充：（举个全局导航守卫的例子）

router.beforeEach((to, from, next) => {
 if (to.path === '/login') return next()
 const tokenStr = window.sessionStorage.getItem('token') 
 if (!tokenStr) return next('/login')
 next()
})