vue-router进阶篇整理

导航守卫

1.路由导航：路由正在发生变化
2.导航守卫：主要用来通过跳转或取消的方式守卫导航。参数或查询的改变并不会触发进入/离开的导航守卫，可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫

3.全局前置守卫：beforeEach
使用 router.beforeEach 注册一个全局前置守卫

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序（上面的router里面的每个路由）调用。守卫是异步解析执行，此时导航在所有守卫 resolve （释放）完之前一直处于 等待中。（可能有点绕，将”导航“替换为”路由正在发生变换“更有利于理解）。

每个守卫方法接收三个参数：

• to: Route：即将要进入的目标路由对象
• from: Route：当前导航正要离开的路由
• next: Function：调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数:
  • next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)
  • next(false)：中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址
  • next(’/’) 或者 next({ path: ‘/’ })：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置路由对象
  • next(error)：导航会被终止且该错误会被传递给 router.onError() 注册过的回调

全局解析守卫：beforeResolve
1.调用时间：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

const router = new VueRouter({ ... })

router.beforeResolve((to, from, next) => {
  // ...
})

全局后置钩子：afterEach
路由被解析及导航被确认之后调用，此时可以将进度条设为加载完成等操作。这些钩子不会接受 next 函数也不会改变导航本身

router.afterEach((to, from) => {
  // ...
})

路由独享守卫：beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内守卫

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

路由元信息

1.定义路由时配置属性meta

在这里插入代码片const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

配置项：

// 稍后

访问meta：
routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录。一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

数据获取

1.导航完成前数据获取
先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。现在我的项目大部分使用这种方式。

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

2.导航完成后数据获取
导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

注意：在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒

滚动行为

1.背景：使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。这个功能只在支持 history.pushState 的浏览器中可用
2.使用：创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

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

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
3.返回值样式

{ x: number, y: number }
// or
{ selector: string, offset? : { x: number, y: number }}

4.例子

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}
// 对于所有路由导航，简单地让页面滚动到顶部

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}
// 返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}
// 模拟“滚动到锚点”的行为

异步滚动行为（略）

路由懒加载

1.对于大项目比较有用，还需要详细琢磨

以上内容，写的较详细的都是在开发项目中遇到的，略的都是没有用的或者我现在还不清楚的点，以后再慢慢补存。

补存三个概念：
1.route：单个路由。 获取方法：this.$route
2.routes：定义的路由集合，多个route。 获取方法：this.$router.options.routes
3.router：定义的路由实例，包含routes和对路由的操作方法包括导航方法等。this.$router