路由懒加载优化

首先得需要插件支持：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 = post
      next()
    })
  }

　　如果我们需要使用 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;