前端工程师面试必问题？路由守卫，导航守卫？

1.vue路由有几种模式？有什么区别，以及原理？

vue的路由模式一共有两种，分别是哈希和history，他们的区别是hash模式不会包含在http请求当中，并且hash不会重新加载页面，而使用history模式的话，如果前端的url和后端发起请求的url不一致的话，会报404错误，所以history的原理是利用html5新增的两个特性方法，分别是psuhState和replaceState来完成的，以上就是对vue路由的理解。

2.vue路由守卫？

路由的导航守卫 又叫做路由的钩子函数（生命周期函数）
就是在跳转页面的时候把路由栏下来，做一些操作在放行，vue一共提供了三种路由守卫。
第一种是全局守卫
beforeEach路由进入之前
afterEach路由进入之后

第二种 组件内守卫
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由离开之前

第三种 路由独享守卫
beforeEnter 路由进入之前

回调函数里面有三个参数

分别是 to from next
next 这个参数 在路由3.x版本的时候，是必须的
但是到了路由4.x版本的时候next参数变成可选的了
一般来说vue2搭配 3.x的路由
vue3搭配 4.x 的路由

比如说购物车页面只有登陆的才能访问，我们可以用组件级守卫购物车页面，如果已经登陆存有token 的话，就继续访问这个页面，如果没有登陆的话就会跳转到登陆页面。