vue__之路由懒加载

Posted 2020-12-13 cl1998

1. 基础写法, 没有懒加载

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Comment from ‘@/assets/view/comment.vue‘
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘comment‘,
      component: Comment
    }
  ]
})

2. 路由懒加载, ES6的import()方法 . (按需加载)

import Vue from ‘vue‘
import Router from ‘vue-router‘
const HelloWorld = () => import(‘@/components/HelloWorld‘)// 写法一
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
　　　　//或者直接方法一写在这里
　　　component: () => import("@/components/HelloWorld")// 写法二
    }
  ]
})

3. vue的异步组件, require()方法 . (按需加载)

import Vue from ‘vue‘
import Router from ‘vue-router‘
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: resolve => require([‘@/components/HelloWorld‘], resolve),
    }
  ]
})

4. vue的异步组件 + webpack的ensure()方法

import Vue from ‘vue‘
import Router from ‘vue-router‘
const HelloWorld = r => require.ensure([], () => r(require(‘@/components/HelloWorld‘)), ‘HelloWorld‘)
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    }
  ]
})