Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载
2022/7/15 23:25:36
本文主要是介绍Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Vue Router路由配置中的component里面配置即可
1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'),
原理:
传统的 es6 导入方式,会在页面打开的时候,把所有的组件一股脑加载到内存中.这样做是浪费内存的. 如果我们的项目时单页面应用,则应该让对应的视图组件进行懒加载
注意: webpack 默认会把所有的 js 文件合并成一个 js.这样不利于懒加载.所以我们使用 import()让 webpack 打包文件时,将需要懒加载的文件单独打包成一个 js 文件.
简单来说:懒加载就是调用谁就加载谁。不用懒加载的话,是全部加载出来的
这里简单在运用VueRouter的时候进行懒加载
1.Vue VueRouter3官方地址:
https://v3.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
2.路由配置文件:
官网运用:
const Foo = () => import('./Foo.vue')
const router = new VueRouter({ routes: [{ path: '/foo', component: Foo }] })
此时已经完成懒加载,
3.一步完成懒加载 看(2)
对比:
(1)非懒加载:
1 // 1.引入插件 2 import Vue from 'vue' 3 import VueRouter from 'vue-router' 4 5 // 4.引入外部组件 6 import Home from '@/views/Home' 7 8 // 2.注册插件 9 Vue.use(VueRouter) 10 11 // 3.创建实例对象 12 const router = new VueRouter({ 13 mode: 'history', 14 routes:[ 15 {path: '/', redirect: '/home' }, 16 {path: '/home',name: 'home',component: Home,}, 17 ] 18 }) 19 20 export default router
(2)懒加载:17行
1 // 1.引入插件 2 import Vue from 'vue' 3 import VueRouter from 'vue-router' 4 5 // // 4.引入外部组件 6 // import Home from '@/views/Home' 7 8 // 2.注册插件 9 Vue.use(VueRouter) 10 11 // 3.创建实例对象 12 const router = new VueRouter({ 13 mode: 'history', 14 routes:[ 15 {path: '/', redirect: '/home' }, 16 // {path: '/home',name: 'home',component: Home,}, 17 {path: '/home',name: 'home',component: ()=>import('@/views/Home'),}, 18 ] 19 }) 20 21 export default router
这篇关于Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set