Vue路由
vue路由有两种模式:
hash:哈希模式,也是vue路由的默认模式,使用url的hash来模拟一个完整的路由,于是当url改变时,页面不会重新加载;依靠散列算法:将不定长度的内容转换为定长的内容存入hash表中,当路由不同时,可以散列计算出不同的值,进行查找。
history:历史模式,利用history.pushState API来完成url跳转而无需重新加载页面。但这种模式需要后台的配置,需要服务器端增加一个覆盖所有情况的候选资源:如果url匹配不到任何静态资源,则应该返回同一个index.html页面,这个页面是app依赖的页面。
导航守卫
导航守卫主要用来通过跳转或取消的方式守卫导航,主要有全局守卫、单个路由独享守卫、组件守卫。
-
全局路由守卫
-
全局前置路由守卫 -- router.beforeEach((to,from,next)=>{ }) 当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行的,此时导航在所有守卫resolve完之前一直处于等待中。
每个守卫方法介绍三个参数:
-
to:route:即将进入的目标路由对象
-
from:route :当前导航要离开的理由
-
next:function:一定要调用这个方法来resolve这个钩子。执行效果依赖next方法的调用参数
-
next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed(确认的)
-
next(false):中断当前的导航。如果浏览器的url改变了(可能是用户手动或者浏览器后退按钮),那么url地址会重置到from路由对应的地址
-
next('/')/next({pathl'/}):跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
-
next(error):导航终止,error被传递给router.onError()注册过的回调。
-
-
-
全局解析守卫 -- router.beforeResolve 在导航被确认之后,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫被调用。使用方法与前置守卫一样。
-
全局后置钩子 -- router.afterEach 接收to,from参数,不接受next函数也不会改变导航本身。
-
-
路由独享的守卫 -- beforeEnter 在路由配置上直接定义守卫,方法参数和全局前置守卫一致。
-
组件内守卫
-
beforeRouteEnter :不支持访问this,守卫在确认之前被调用,新组件还没有被创建;可以通过传入一个回调给next来访问组件实例。是唯一支持给next传递回调的守卫。
-
beforeRouteUpdate
-
beforeRouteLeave:这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过
next(false)
来取消。
-
完整的导航解析流程
-
导航被触发;
-
在失活的组件里调用离开守卫;
-
调用全局的beforeEach守卫;
-
在重用的组件里调用beforeRouterEnter守卫;
-
在路由配置里调用beforeEnter。
-
解析异步路由组件;
-
在被激活的组件内调用beforeRouterEnter;
-
调用全局的beforeResolve守卫;
-
导航被确认;
-
调用全局的afterEach钩子;
-
触发DOM更新;
-
创建好的实例通过调用beforeRouterEnter守卫传递给next回调函数