在项目的目录中找到router文件夹里的index.js
index.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 }
}
})
修改后的index.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 }
}
})
注意:当app.js文件很小或者不超过1MB的时候我们没必要把app.js拆分进行异步加载,这样就不会造成多余的http请求了,否则的话就会降低页面的性能
页面中的异步加载组件
我们不单单可以在路由中使用异步加载组件,在一个页面中也可以使用
如页面中异步加载Header.vue组件
原先的写法
<script>
import HomeHeader from './components/Header'
export default {
components: {
HomeHeader
}
}
</script>
异步加载的写法
<script>
export default {
components: {
HomeHeader: () => import('./components/Header')
}
}
</script>