vue-router 笔记整理

• 组件内使用路由

  watch能够监听，或者beforeRouteUpdate 钩子函数监听。用途？
  用途：若是目的地和当前路由相同，只有参数发生了改变 (好比从一个用户资料到另外一个
  /users/1 -> /users/2)，你须要使用 beforeRouteUpdate 来响应这个变化 (好比抓取
  用户信息)。

• 路由的三大模式

  路由模式（history、
  hash 和 abstract）路由的push等同window.history.pushState(一个状态对象,
  title, url)

• 路由组件传参

  使用props 将组件和路由解耦

• 路由守卫（钩子函数

  全局的,单个路由独享的, 组件级的
  全局：router.beforeEach（to, from, next）异步解析 状态有“等待中”，“肯定的”
  router.afterEach（to, from）
  路由独享钩子：beforeEnter（to, from, next） 用法同全局的
  router.beforeEach（）
  组件级：

  beforeRouteEnter（to，from， next）
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 this
  // 由于当守卫执行前，组件实例还没被建立
  
  beforeRouteUpdate（to，from， next）
      // 在当前路由改变，可是该组件被复用时调用
     // 举例来讲，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之
     间
     //跳转的时候，
    // 因为会渲染一样的 Foo 组件，所以组件实例会被复用。而这个钩子就会在这个状况下
    被调用。
    // 能够访问组件实例 `this`
  
     beforeRouteLeave（to，from， next ）
     // 导航离开该组件的对应路由时调用
    // 能够访问组件实例 `this`

  beforeRouteLeave 这个钩子函数颇有用，顾名思义，导航离开该组件对应的路由调用，能够作一些
  离开时候的comfirm判断，好比有重要的信息须要用户保存后才能进行跳转、存储session、清除定
  时器等。

• 路由元信息：
  能够配置 meta 字段，一般用来作是否须要登陆的判断
  meta: { requiresAuth: true }
• 路由的过渡：
  设置不一样的 name 好比name=fade
• 数据获取：（比较陌生，后续着重看）
  导航完成以后获取：先完成导航，而后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。
  导航完成以前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

• 滚动行为
  这个功能只在支持 history.pushState 的浏览器中可用

const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 指望滚动到哪一个的位置 } })

• 路由懒加载
  结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载

  参考文献

• vue-router 中文官方文档