vue转场动画
<template>
<transition name="fade" class="fade">
<div class="login"></div> // 一般页面使用过渡时结构如图所示
</transition>
</template>
<router-view v-slot="{ Component }">
<transition name="fade" class="fade"> //子组件使用过渡结构
<component :is="Component" />
</transition>
</router-view>
<transition name="fade" class="fade"> //也可以直接绑定到router-view上
<router-view />
</transition>
这三种都可以使用如下方法
- 找到需要添加过渡动画的元素,用一个transition标签包裹起来,并给它指定一个name属性,这个name属性将来会替换掉类名的v-前缀
- 定义上面6个类名里面的类容,注意类名v-前缀要换成name的值,关键要分清楚开始和结束的状态样式
搭配css设置
.fade-enter-active{
animation: ami 2s;
}
@keyframes ami {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(0);
}
}
.fade-leave-active{
animation: amiro 3s;
transform-origin: center center;
}
@keyframes amiro {
0%{
transform: translateX(0) rotateZ(0);
}
100%{
transform: translateX(-100%) rotateZ(-180deg);
}
}
修改想要的只需在样式中进行修改即可
keep-active
vue3不能直接使用keep-alive transition 进行包裹路由的坑(router-view)
keep-alive 使用方法如下
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
样式穿透
:deep(.类名) {
color: red;
}
路由守卫
路由拦截(路由守卫、导航守卫) 分为 3种:
全局的:
- 前置守卫:router.beforeEach((to,from,next)=>{})
- to-到哪里去 from – 从哪里来 next – 重定向
- 后置守卫:router.afterEach((to,from)=>{}) 没有next
例如
router.beforeEach((to, from, next) => {
// console.log(to, from, next);
// console.log(store.state);
// console.log(from.name)
const token = store.state.token;
if (!token && to.name!='Login') {
// about -- > login
// login -- > login
next("login");
}
if(token && to.name=='Login'){
next('/')
}
next()
});
router.afterEach((to,from,next)=>{
console.log('afterEach',to, from, next);
})
组件的、
* beforeRouteEnter – 路由进入之前
* beforeRouteUpdate – 路由更新之前 (特定的指 组件没变;路由变了–动态路由)
* beforeRouteLeave — 路由离开之前
例如
beforeRouteEnter(to,from,next){
// console.log(to, from, next);
next()
},
beforeRouteUpdate(to,from,next){
console.log('beforeRouteUpdate')
next()
},
beforeRouteLeave(to,from,next){
console.log(to, from, next);
next()
}
独享的
- beforeEnter–是写在路由配置里面的
例如
{
path: "/",
name: "Home",
component: Home,
beforeEnter(to,from,next){
console.log(to, from, next);
console.log('独享的');
next()
}
},