vue router

数据获取

获取数据的时候可以在文件中对 $route 来进行监听，表示当路由发生变化之后调用对应的数据请求处理函数。

export default {
    watch: {
      '$route': 'fetchData'
  },
  methods: {
      fetchData () {
        this.loading = true
      getPost(this.$route.params.id, callback)
    }
  }
}

lazy load

在使用 webpack 的时候，我们可以使用一个特殊的语法来标明一个分离点(split point)，webpack 会自动的对其进行分离并且对这个分离的模块进行懒加载。

和 Vue 的异步组件相结合，我们可以轻易的使我们的组件路由被匹配的时候才进行懒加载。异步组件被定义为：

• resolve => resolve(Component)
• () => Promise

对于单个的组件，我们可以使用动态引入(dynamic import)来实现，因为它会返回一个 Promise。
const Foo = () => import('./Foo.vue')

new VueRouter({
    routes: [
    {
        path: '/foo',
      component: () => import('./Foo.vue')
    }
  ]
})