路由懒加载优化

首先得需要插件支持：syntax-dynamic-import
 import Vue from 'vue'
import VueRouter from 'vue-router'
/*import First from '@/components/First'
import Second from '@/components/Second'*/Vue.use(VueRouter)
//方案1
const first =()=>import(/* webpackChunkName: "group-foo" */ "../components/first.vue");
const second = ()=>import(/* webpackChunkName: "group-foo" */ "../components/second.vue");
const three = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/three.vue");
const four = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/four.vue");
//方案2
const first = r => require.ensure([], () => r(require('../components/first.vue')), 'chunkname1')
const second = r => require.ensure([], () => r(require('../components/second.vue')), 'chunkname1')
const three = r => require.ensure([], () => r(require('../components/three.vue')), 'chunkname2')
const four = r => require.ensure([], () => r(require('../components/four.vue')), 'chunkname2')//懒加载路由
const routes = [{   //当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面path:'/', //重定向，就是给它重新指定一个方向，加载一个组件；component:first},{path:'/first',component:first},{path:'/second',component:second}, {path:'/three',component:three},{path:'/four',component:four}
//这里require组件路径根据自己的配置引入
]
//最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。const router = new VueRouter({routes
})export default router;
 
　　https://www.zhihu.com/question/50121629
 
 // 进入路由beforeRouteEnter (to, from, next) {getPost(to.params.id, post => {// 由于组件还没有初始化, this 不存在// next 接受一个回调, 用于切换路由后执行, 可以通过vm获取实例next(vm => {vm.post = post})})},// 路由变化beforeRouteUpdate (to, from, next) {getPost(to.params.id, (post) => {// 组件已经初始化, this 存在this.post = postnext()})} 
　　如果我们需要使用 Vuex ，可能会遇到更多问题：
无法获取 $store （ beforeRouteEnter中无法获取this ）
无法获取组件实例的 methods（ beforeRouteEnter中无法获取this ）
无法控制 dispatch 流程
个人比较习惯这样解决：
首先封装 Promise 用于控制 dispatch 流。
 // store.js
const generate = commit => (id, mutation) => {return new Promise((resolve, reject) => {getPost(id).then(data => {commit(mutation, data)resolve()})})
}
 
　　正常使用 actions 和 mutations。
 // store.js
[action.yourAction] ({ commit, state }) {return generate(commit)(yourId, mutation.yourMutation)
},
[mutation.yourMutation] (state, data) {state.yourPost = data
}
 
　　在组件中使用引入store，并运用 Promise 控制流程。
 // YourComponent.vue
import store from './yourRoute/store.js'export default {beforeRouteEnter: (to, from, next) => {Promise.all([store.dispatch(types.yourModule.action.yourAction)]).then(() => {next()})},computed: {...mapGetters({yourPost: types.yourModule.getter.yourPost})},
}
 
　　先异步请求数据，动态构建好router，再初始化App组件。index.html里面加个loading效果，App组件创建好会自动替换掉它。
import Vue from 'vue'
import VueRouter from 'vue-router'
/*import First from '@/components/First'
import Second from '@/components/Second'*/
   
Vue.use(VueRouter)
//方案1
const first =()=>import(/* webpackChunkName: "group-foo" */ "../components/first.vue");
const second = ()=>import(/* webpackChunkName: "group-foo" */ "../components/second.vue");
const three = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/three.vue");
const four = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/four.vue");
//方案2
const first = r => require.ensure([], () => r(require('../components/first.vue')), 'chunkname1')
const second = r => require.ensure([], () => r(require('../components/second.vue')), 'chunkname1')
const three = r => require.ensure([], () => r(require('../components/three.vue')), 'chunkname2')
const four = r => require.ensure([], () => r(require('../components/four.vue')), 'chunkname2')
//懒加载路由
const routes = [
 {   //当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面
 path:'/', //重定向，就是给它重新指定一个方向，加载一个组件；
 component:first
 },
 {
 path:'/first',
 component:first
 },
 {
 path:'/second',
 component:second
 }, {
 path:'/three',
 component:three
 },
 {
 path:'/four',
 component:four
 }
//这里require组件路径根据自己的配置引入
]
//最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
   
 const router = new VueRouter({
 routes
})
   
export default router;