vue3根据路由动态加载子组件
时间: 2023-05-29 13:06:03 浏览: 282
在Vue3中,可以使用Vue Router提供的动态导入(Dynamic Import)功能来根据路由动态加载子组件。具体步骤如下:
1. 在路由配置中,将要动态加载的子组件使用`import()`语法进行导入,并将其设置为`component`属性的值。例如:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/home',
name: 'Home',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('@/views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
2. 在父组件中使用`<router-view>`标签来显示子组件。例如:
```html
<template>
<div>
<h1>App Component</h1>
<router-view></router-view>
</div>
</template>
```
当路由变化时,Vue Router会自动根据当前路由对应的子组件进行动态加载,并将其渲染到`<router-view>`标签中。