vue router

668 阅读2分钟

路由导航router:

全局导航

beforeEach(to, from, next)beforeResolveafterEach(to, from)

路由专属导航

beforeEnter

组件内路由导航

beforeRouteLeavebeforeRouteUpdatebeforeRouteEnter

beforeRouteEnter守卫 不能 访问this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

对于 beforeRouteUpdatebeforeRouteLeave 来说,this已经可用了,所以不支持传递回调,因为没有必要了。

路由导航解析流程

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

Vue Router 导航守卫

编程式导航

router.push(location, onComplete?, onAbort?)

可选的在 router.pushrouter.replace 中提供 onCompleteonAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。在 3.1.0+,可以省略第二个和第三个参数,此时如果支持 Promise,router.push 或 router.replace 将返回一个 Promise。

注意: 如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

Vue Router 编程式导航

vuex:

  • state: 状态信息
  • mutations: state操作
  • getters: 获取state
  • actions: 执行mutations,actions内可以执行异步请求
  • modules: 模块化的状态管理

get/post/put区别

  • put: 两次相同的请求会被覆盖,用来修改数据
  • post:
    1. 不会被覆盖,用于赠数据
    2. 请求参数在Request body内
    3. 一般会产生2个TCP数据包,先发送header,返回100后再发送data, 验证数据完整性
  • get:
    1. 请求参数在url内
    2. 如果有非ASCII码,请求前会先转码
    3. 1个TCP数据包,同时发送header和data