vue carga optimizada de la primera pantalla (1) (carga diferida)

# Ruta de carga diferida (carga bajo demanda)

Rutas que han sido cargadas de forma diferida:

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

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import('@/components/index'),
      redirect: 'home',  // 重定向到home组件
      children: [
        {
          path: 'home',
          component: () => import('@/components/indexs/home')
        }
      ]
    },

  ]
})

No hay ruta de carga lenta

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

import index from '@/components/index'
import home from '@/components/indexs/home'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index,
      redirect: 'home',  // 重定向到home组件
      children: [
        {
          path: 'home',
          component: home,
        }
      ]
    },

  ]
})

No aparezca "/" en la ruta de las rutas anidadas

Función: los componentes se cargan a pedido, lo que reduce el tiempo de carga de la primera pantalla.

Consulte el enlace oficial: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89 % E7% BB% 84% E5% 88% 86% E5% 9D% 97