vue路由跳转

• Z时代
• 2024-03-11
• 分类：IT

.slide-right-enter-active{
transition: all .4s ease;
transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
position: absolute;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000000;
}
.slide-left-enter-active{
transition: all .4s ease;
position: absolute;
top: 0px;
opacity: 1;
width: 100%;
height: 100%;
}
.slide-right-leave-active{
position: absolute;
transition: all .4s ease;
width: 100%;
height: 100%;
opacity: .5;
}
.slide-left-leave-active {
transition: all .4s ease;
transform: translate3d(100%, 0px, 0px);
-ms-transform: translate3d(100%, 0px, 0px);
-moz-transform: translate3d(100%, 0px, 0px);
-webkit-transform: translate3d(100%, 0px, 0px);
-o-transform: translate3d(100%, 0px, 0px);
position: absolute;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000000;
}
.slide-right-enter {
transform: translate3d(100%, 0px, 0px);
-ms-transform: translate3d(100%, 0px, 0px);
-moz-transform: translate3d(100%, 0px, 0px);
-webkit-transform: translate3d(100%, 0px, 0px);
-o-transform: translate3d(100%, 0px, 0px);
visibility: visible;
}
.slide-right-leave {
transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
visibility: hidden;
}
.slide-left-enter {
transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
opacity: .5;
visibility: visible;
}
.slide-left-leave {
transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
visibility: hidden;
}
为啥跳转的时候不会盖住上一个页面，有什么办法吗

<template>
<div id="app">

<keep-alive>
  <transition :name="slideName" :duration="{ enter: slideTime, leave: slideTime }">
    <router-view></router-view>
  </transition>
</keep-alive>

</div>
</template>

<script>
export default {
name: "App",
data() {

return {
  slideName: 'slide-right',
  slideTime: 400
};

},
watch: {

// 使用watch 监听$router的变化
$route(to, from) {
  this.slideName = this.$slideName
}

}
};
</script>

<style>

app {

text-align: center;
width: 100%;
overflow: hidden;
position: relative;
}
.slide-right-enter-active{
transition: all .4s ease;
transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
position: absolute;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000000;
}
.slide-left-enter-active{
transition: all .4s ease;
position: absolute;
top: 0px;
opacity: 1;
width: 100%;
height: 100%;
}
.slide-right-leave-active{
position: absolute;
transition: all .4s ease;
width: 100%;
height: 100%;
opacity: .5;
}
.slide-left-leave-active {
transition: all .4s ease;
transform: translate3d(100%, 0px, 0px);
-ms-transform: translate3d(100%, 0px, 0px);
-moz-transform: translate3d(100%, 0px, 0px);
-webkit-transform: translate3d(100%, 0px, 0px);
-o-transform: translate3d(100%, 0px, 0px);
position: absolute;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000000;
}
.slide-right-enter {
transform: translate3d(100%, 0px, 0px);
-ms-transform: translate3d(100%, 0px, 0px);
-moz-transform: translate3d(100%, 0px, 0px);
-webkit-transform: translate3d(100%, 0px, 0px);
-o-transform: translate3d(100%, 0px, 0px);
visibility: visible;
}
.slide-right-leave {
transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
visibility: hidden;
}
.slide-left-enter {
transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
opacity: .5;
visibility: visible;
}
.slide-left-leave {
transform: translate3d(0px, 0px, 0px);
-ms-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate3d(0px, 0px, 0px);
visibility: hidden;
}
</style>

回答：

一般来说，router-view只会渲染一个页面，检查下这两个页面是否存在重复代码（复制粘贴问题？）

以上是 vue路由跳转 的全部内容， 来源链接： utcz.com/p/935433.html