vue-router中引入vue组件的两种方式

时间:2024-04-10 18:15:26

前提

在vue的路由配置文件(routers.js)中,有如下两种引入组件的方式:

vue-router中引入vue组件的两种方式

一:调用时间

require: 运行时调用,理论上可以运用在代码的任何地方
import:编译时调用,必须放在文件开头

二:加载效率

1、懒加载:component: resolve => require(['@/view/index.vue'], resolve)
用require这种方式引入的时候,会将你的component对应的组件分别打包成不同的js,加载的时候是按需加载,只用访问这个路由网址时才会加载这个js。

2、非懒加载:component: index
如果用import引入的话,当项目打包时路由里的所有component对应的组件都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长。

相关文章