vue路由懒加载和组件懒加载

it2024-03-15  59

vue路由懒加载和组件懒加载其实原理一样 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import

路由懒加载 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     }   ] })

组件懒加载 <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>

最新回复(0)