【vue3｜vue-router4】component(resolve) {...}修改组件引入方式
warning:
这篇文章距离上次修改已过190天，其中的内容可能已经有所变动。
在Vue 3和Vue Router 4中，如果你想要修改现有路由的组件引入方式，你可以使用新的import()语法进行代码拆分。以下是一个简化的例子：
// 假设你有一个UserProfile组件在user-profile.vue文件中
// 在router/index.js中
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/user/:id',
name: 'UserProfile',
// 使用动态导入（懒加载）
component: () => import('../components/user-profile.vue')
},
// ...其他路由
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router在这个例子中，我们使用了动态导入（懒加载），这意味着当用户访问对应路由时，才会加载UserProfile组件。这有助于提高应用的启动性能，因为只有需要时才会加载组件。
评论已关闭