(十四)router按需加载组件

按需加载组件

• 常规的写法,这样文件小的时候完全没有问题。app.js他会全部加载完毕

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
import Detail from '@/pages/Detail/Detail'
Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/city',
    name: 'City',
    component: City
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
  }
  ],
  // 自定义路由切换时页面如何滚动
  scrollBehavior (to, from, savedPosition) {
    return {
      x: 0,
      y: 0
    }
  }
})

• 这个时候有个需求就是当app.js非常大的时候，我们需要按需加载,这样就是访问每个页面都能按需加载

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: () =>
        import('@/pages/home/Home')

  },
  {
    path: '/city',
    name: 'City',
    component: () =>
        import('@/pages/city/City')

  },
  {
    path: '/detail/:id',
    name: 'Detail',
    component: () =>
        import('@/pages/Detail/Detail')

  }
  ],
  // 自定义路由切换时页面如何滚动
  scrollBehavior (to, from, savedPosition) {
    return {
      x: 0,
      y: 0
    }
  }
})