zoukankan      html  css  js  c++  java
  • vue-router路由懒加载

    正常配置

    import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '@/components/pages/login'
    import Capture from '@/components/pages/capture'
    import List from '@/components/pages/list'
    import CaptureFail from '@/components/pages/capture-fail'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Login',
          component: Login
        },
        {
          path: '/capture',
          name: 'Capture',
          component: Capture
        },
        {
          path: '/list',
          name: 'List',
          component: List
        },
        {
          path: '/capture-fail',
          name: 'CaptureFail',
          component: CaptureFail
        }
      ]
    })
    

    懒加载配置

    import Vue from 'vue'
    import Router from 'vue-router'
    // import Login from '@/components/pages/login'
    // import Capture from '@/components/pages/capture'
    // import List from '@/components/pages/list'
    // import CaptureFail from '@/components/pages/capture-fail'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Login',
          component: resolve => require(['@/components/pages/login'], resolve) // Login
        },
        {
          path: '/capture',
          name: 'Capture',
          component: resolve => require(['@/components/pages/capture'], resolve) // Capture
        },
        {
          path: '/list',
          name: 'List',
          component: resolve => require(['@/components/pages/list'], resolve) // List
        },
        {
          path: '/capture-fail',
          name: 'CaptureFail',
          component: resolve => require(['@/components/pages/capture-fail'], resolve) // CaptureFail
        }
      ]
    })
    
    

    说明

    npm run build后会新增路由数量相匹配的.js文件,在切到相应路由时动态加载这个文件。

    参考

    懒加载 · vue-router

    vue-router路由懒加载(解决vue项目首次加载慢)

  • 相关阅读:
    球员岁月齐祖辉煌,执教生涯尤胜当年
    UVM序列篇之一:新手上路
    *2-3-7-加入field_automation机制
    2.3.6-加入scoreboard
    *2_3_5_加入reference model
    *2.3.4_封装成agent
    *2.3.3-加入monitor
    android的wake_lock介绍
    linux常用命令一些解释
    linux wc命令的作用。
  • 原文地址:https://www.cnblogs.com/mazey/p/8950656.html
Copyright © 2011-2022 走看看