以下是一个使用 Vue 异步组件技术实现路由懒加载的具体示例代码:
// 路由配置
const routes = [
{
path: '/home',
component: () => import('./components/Home.vue')
},
{
path: '/about',
component: () => import('./components/About.vue')
}
]
// 创建 Vue Router 实例
const router = new VueRouter({
routes
})
// 在 Vue 实例中使用路由
new Vue({
router
}).$mount('#app')
在上述示例中,定义了两个路由路径/home
和/about
,并使用import()
函数来动态加载对应的组件。当访问/home
路径时,会加载Home.vue
组件;访问/about
路径时,会加载About.vue
组件。
通过这种方式,只有在实际访问路由时,才会加载对应的组件,实现了路由懒加载的效果。这样可以提高应用的性能,减少初始加载时间。
请确保在构建项目时,配置了合适的构建工具(如 Webpack),以支持异步组件的懒加载。
希望这个示例对你有帮助!如果你还有其他问题或需要进一步的解释,请随时提问。