zoukankan      html  css  js  c++  java
  • Webpack实现路由懒加载的三种方式

    原文指路:https://blog.csdn.net/qq_37540004/article/details/78727063

    第一种:

    引入方式(正常引入):

    const router = new Router({
        routes: [
            {
               path: '/hyh',
               component: hyh,
               name: 'hyh'
            }
        ]
    })

    第二种:

    const router = new Router({
        routes: [
             {
                   path: '/index',
                   component: (resolve) => {
                       require(['../components/index/index'], resolve) // 这里是你的模块 不用import去引入了
                   }
               }
        ]
    })

    第三种: 官方推荐

    // r就是resolve
    const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
    // 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
    const router = new Router({
        routes: [
            {
               path: '/list/blog',
               component: list,
               name: 'blog'
            }
        ]
    })

    介绍一种管理路由的方式 

    // 定义一个路由的数组 类似于白名单黑名单

    const defaultRouterArr = ['/list/share']

    router.beforeEach((to, from, next) => {

    // 如果匹配到这个数组

            if (defaultRouterArr.indexOf(to.path) >= 0) {

    // 执行各种操作 比如让他去登录 不让她进去等等 通过next方法来控制 详细参考vue路由

               next()

          } else {

                 next()

           } 

    })

  • 相关阅读:
    line
    同步fifo的verilogHDL设计实例
    在DE1-SOC上运行Linux
    DE1-SOC连接设定
    Tcl语言笔记之二
    Tcl语言笔记之一
    关于复位赋初值的问题
    Altera FPGA中的pin进一步说明
    Altera FPGA中的pin简介
    笔记之Cyclone IV第一卷第四章Cyclone IV器件中的嵌入式乘法器
  • 原文地址:https://www.cnblogs.com/aimeeblogs/p/9497414.html
Copyright © 2011-2022 走看看