怎么判断动态组件加载完毕
时间: 2023-10-09 08:14:26 浏览: 62
要判断动态组件是否加载完毕,可以使用 Vue Router 的 `beforeEnter` 导航守卫。在这个守卫中,你可以检查动态组件是否已经加载完成,然后再决定是否允许进入该路由。
以下是一个示例代码:
```javascript
const dynamicComponent = () => import('@/views/DynamicComponent.vue');
const dynamicRoute = {
path: '/dynamic',
name: 'dynamic',
component: dynamicComponent,
beforeEnter: (to, from, next) => {
// 检查动态组件是否已经加载完成
if (typeof dynamicComponent().resolved !== 'undefined') {
next(); // 组件已加载完成,允许进入路由
} else {
dynamicComponent().then(() => {
next(); // 组件加载完成后,允许进入路由
});
}
},
};
router.addRoute(dynamicRoute);
```
在上面的代码中,我们定义了一个名为 `dynamicComponent` 的动态组件,并在 `dynamicRoute` 中使用了 `beforeEnter` 导航守卫。在 `beforeEnter` 守卫中,我们首先检查动态组件是否已经加载完成。如果是,则直接调用 `next()` 允许进入该路由;如果不是,则使用 `import()` 动态导入组件,并在导入完成后调用 `next()` 允许进入路由。
这样就能确保在进入动态路由之前,动态组件已经加载完毕。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)