一、基础写法,没有懒加载,打包分离代码

官方最基础的路由写法

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

二、路由懒加载,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
    }
  ]
})

三、vue的异步组件,require()方法。(按需加载)

vue的一种按需加载的方法,点击的时候才会请求,减少首页加载时间。

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),
    }
  ]
})

四、vue的异步组件+webpack的ensure()方法。(按需加载+js打包分离)

vue的一种按需加载的方法,webpack的ensure()方法实现js打包分离,每个组件单独打包,加载的时候文件不会太大。

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
    }
  ]
})

五、最优官方,懒加载和打包分离代码。(【官方推荐】按需加载+js打包分离)

vue官方的一种方法,import()方法和增加webpackChunkName。
1.需要安装 cnpm i -s @babel/plugin-syntax-dynamic-import
2.配置webpack,在webpack-base-conf.js的output加入chunkFilename: ‘[name].js’

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: () => import(/* webpackChunkName: "HelloWorld" */ '@/components/HelloWorld')
     }
  ]
})

写的比较匆忙,有不对的请指出,没有用嵌套路由children,compontent写法也各不一样。

Logo

前往低代码交流专区

更多推荐