前端基础vue路由懒加载

2023-12-22 17:22:49

为什么用路由懒加载

首屏组件加载速度更快一些,解决白屏问题,常言道需要就加载,不需要就先放一边

懒加载定义?

懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。

?使用

常用的懒加载方式有两种:即使用vue异步组件?和?ES中的import(及require.ensure)

1、未用懒加载,vue中路由代码如下

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

 Vue.use(Router)

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

备注:mode是传参模式,用hash有#,#? 就是??hash符号,中文名为哈希符或者锚点,在??hash??符号后的值称为??hash? 值。另外有一个history是没有的

路由的??hash? 模式是利用了??window 可以监听 onhashchange 事件来实现的,也就是说??hash??值是用来指导浏览器动作的,对服务器没有影响,HTTP?请求中也不会包括??hash? 值,同时每一次改变??hash? 值,都会在浏览器的访问历史中增加一个记录,使用“后退”按钮,就可以回到上一个位置。所以,hash 模式?是根据??hash?值来发生改变,根据不同的值,渲染指定DOM位置的不同数据。

2、vue异步组件实现懒加载

  方法如下:component:resolve=>(require(['需要加载的路由的地址']),resolve)

import Vue from 'vue'
import Router from 'vue-router'
  /* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)

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

3、ES 提出的import方法,(最常用,官网建议)

方法如下:const HelloWorld = ()=>import('需要加载的模块地址')

    (不加 { } ,表示直接return)

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

Vue.use(Router)

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

延申:组件懒加载(与路由懒加载相同)

1、原来组件中写法

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
import One from './one'
export default {
  components:{
    "One-com":One
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

2、import方法

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
const One = ()=>import("./one");
export default {
  components:{
    "One-com":One
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

3、异步方法

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
export default {
  components:{
    "One-com":resolve=>require(['./one'],resolve)
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

总结

路由和组件的常用两种懒加载方式:

1、vue异步组件实现路由懒加载

  component:resolve => require(['需要加载的路由的地址'], resolve)

???????require('name'):是同步加载模块的形式;require(['name1', 'name2']):是异步加载模块的形式;

2、es提出的import(推荐使用这种方式)

  const HelloWorld = ()=>import('需要加载的模块地址')

? ? ? ?import函数支持动态加载模块,返回一个 Promise 对象。

文章来源:https://blog.csdn.net/2201_75705263/article/details/135154994
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。