vue2路由过渡loadding
时间: 2024-05-10 10:17:45 浏览: 13
可以通过在路由切换时添加过渡效果来实现路由过渡加载动画。具体步骤如下:
1. 在 App.vue 中添加过渡组件:
```html
<template>
<div id="app">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
```
2. 在路由配置中添加 beforeEnter 钩子函数:
```javascript
const router = new VueRouter({
routes: [
{
path: "/",
name: "Home",
component: Home,
beforeEnter: (to, from, next) => {
// 显示 loading 动画
document.querySelector(".loading").style.display = "block";
next();
}
},
{
path: "/about",
name: "About",
component: About,
beforeEnter: (to, from, next) => {
// 显示 loading 动画
document.querySelector(".loading").style.display = "block";
next();
}
}
]
});
```
3. 在路由守卫中隐藏 loading 动画:
```javascript
router.afterEach((to, from) => {
// 隐藏 loading 动画
document.querySelector(".loading").style.display = "none";
});
```
这样在路由切换时会触发过渡动画,并且在路由切换前显示 loading 动画,在路由切换后隐藏 loading 动画。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)