Vue路由

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回调函数