vue中如何实现路由懒加载
时间: 2023-09-07 20:17:25 浏览: 108
在 Vue 中实现路由懒加载可以通过异步组件来实现。使用异步加载组件时,只有在需要时才会加载组件,这可以大大提高应用程序的性能。
下面是实现步骤:
- 安装
@babel/plugin-syntax-dynamic-import
插件
npm install @babel/plugin-syntax-dynamic-import --save-dev
- 在
.babelrc
文件中添加插件
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
- 在路由配置文件中使用
import()
动态加载组件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: () => import('./views/Home.vue')
},
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
}
]
})
export default router
这样就能够实现路由懒加载了。在访问该路由时,只有对应的组件被加载,其他组件不会被加载,从而提高了应用的性能。
相关推荐


















