vue-router以及vue-router的原理

vue-router

路由原理：路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给服务器，最终返回给客户端

路由模式：路由分为hash模式与history模式
hash模式：在浏览器中符号的“#”，以及“#"后面的字符称之为hash,不会重新加载页面，即使没有做到对路由的全覆盖，也不会返回404报错

路由传参:query,params,动态路由传参

• params只能使用name,query可以使用name和path
• 使用params传参刷新后丢失，而query传参刷新后不会丢失
• params在地址栏中不会显示，query会显示
• params可以和动态路由一起使用，query不可以

路由跳转

• router.push( )：将有记录存放在历史栈中，点击后退，将返回上一级的记录router-link to 就是调用的push
• router.replace()：不会存放历史栈，而是替换了当前的历史可以在router-link中添加replace或router.push对象中添加replace:true 激活当前功能
• router.go(-3)：()里的参数为整数，指的是在历史栈中前进或后退的步数-1为返回上一历史，0为刷新页面，1为返回下一历史

vue的路由守卫

路由守卫主要有全局守卫，路由独享守卫，组件内守卫，每个守卫接收三个参数

• to:即将要进入的目标路由对象
• from:当前导航要离开的路由
• next：钩子函数，里面定义参数，确认下一步路由要做什么

全局守卫

• router.beforeEach：全局前置守卫 最合适用在判断进入的页面是否需要登录
• router.beforeResolve：全局解析守卫 在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
• router.afterEach：全局后置钩子 一般用来设置动态的请求头 再这里next()是多余的

组件内的守卫

• beforeRouteEnter： 进组组件前的守卫 注意：在这里是拿不到vue的this的，但是可以通过传一个回调给 next来访问组件实例
  next ( vm=> { console.log(vm) } )
  vm就是vue的组件实例
  通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消
• beforeRouteUpdate：路由更新时的守卫
• beforeRouteLeave：离开组件时的守卫

完整的导航解析流程

• 在失活的组件里调用 beforeRouteLeave 守卫
• 调用全局的 beforeEach 守卫
• 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
• 在路由配置里调用 beforeEnter
• 解析异步路由组件
• 在被激活的组件里调用 beforeRouteEnter
• 调用全局的 beforeResolve 守卫 (2.5+)。
• 导航被确认
• 调用全局的 afterEach 钩子
• 触发 DOM 更新
• 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。