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

    使用方法

    component:resolve => require(['@/pages/About'],resolve)      //"@"相当于".."
    

    懒加载

    router/index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
     
    export default new Router({
      mode:'history',
      routes: [
        {
          path:'/',
          redirect:'/index'
        },
        {
          path: '/about',
          name: 'About',
          component:resolve => require(['@/pages/About'],resolve)
        },
        {
          path: '/index',
          name: 'Index',
          component:resolve => require(['@/pages/Index'],resolve)
        },
        {
          path: '/product',
          name: 'Product',
          component:resolve => require(['@/pages/Product'],resolve)
        }
      ]
    })

    非懒加载

    router/index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import About from '@/pages/About'
    import Index from '@/pages/Index'
    import Product from '@/pages/Product'
    Vue.use(Router)
     
    export default new Router({
      mode:'history',
      routes: [
        {
          path:'/',
          redirect:'/index'
        },
        {
          path: '/about',
          name: 'About',
          component:About
        },
        {
          path: '/index',
          name: 'Index',
          component:Index
        },
        {
          path: '/product',
          name: 'Product',
          component:Product
        }
      ]
    })

    如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长。
    当你用require这种方式引入的时候,会将你的component分别打包成不同的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js。
    你可以打包的时候看看目录结构就明白了。 

     

     
  • 相关阅读:
    iis 500
    无线密码获取
    数据库创建
    系统基础配置指令
    手把手教你用ngrx管理Angular状态
    vue中v-cloak解决刷新或者加载出现闪烁(显示变量)
    HBuilder如何与真机连接
    01 spring boot源码阅读参考
    01 git学习笔记参考
    OAuth2授权基础知识
  • 原文地址:https://www.cnblogs.com/ysx215/p/10949740.html
Copyright © 2011-2022 走看看