vue路由组件过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.first {
height: 100vh;
background-color: red;
}
.second {
height: 100vh;
background-color: yellow;
}
.page {
width: 100vw;
position: absolute;
}
/* 从第一个页面,进入第二个页面,第一个页面执行离场动画，第二个页面执行入场动画 */
.go-enter {
transform: translateX(100%);
}
.go-enter-active {
transition: all 0.5s linear;
}
.go-enter-to {
transform: translateX(0);
}
.go-leave {
transform: translateX(0);
}
.go-leave-active {
transition: all 0.5s linear;
}
.go-leave-to {
transform: translateX(-100%);
}
/* 从第二个页面,返回第一个页面,第一个页面执行进入动画，第二个页面执行离场动画 */
.back-enter {
/* transform: translateX(-100%); */
opacity: 0;
}
.back-enter-active {
transition: all 0.5s linear;
}
.back-enter-to {
/* transform: translateX(0); */
opacity: 1;
}
.back-leave {
/* transform: translateX(0); */
opacity: 1;
}
.back-leave-active {
transition: all 0.5s linear;
}
.back-leave-to {
/* transform: translateX(100%); */
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<!-- 当路由组件需要过渡效果,同时又需要缓存,按照下面的结果写 -->
<transition :name="aniName">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
<template id="first">
<div class="first page">
<h1>我是首页</h1>
<router-link to="/second">进入下一页</router-link>
</div>
</template>
<template id="second">
<div class="second page">
<button @click="back">< 返回</button>
<h1>详情页</h1>
<p>当前页面访问次数:{{count}}</p>
</div>
</template>
<script>
let ff = {
template: "#first",
created() {
console.log("first组件实例被创建");
},
activated() {
console.log("first组件实例激活");
},
};
let ss = {
template: "#second",
data() {
return {
count: 0,
};
},
created() {
console.log("second组件实例被创建");
},
activated() {
console.log("second组件实例激活");
this.count++;
},
methods: {
back() {
// 注意: this.$route 和 this.$router区别
// this.$route 获取当前激活的路由信息对象,从这个对象中科院获取比较详细的路由信息
// this.$router 类似于 js 中的history 用于编程时导航,切换路由的
// this.$router.push("first");
this.$router.go(-1);
// this.$router.replace("first");
// push() 会生成历史记录
// go() 不会生成历史记录,而是找到之前的历史记录来回切换
// replace() 将当前页面的历史记录替换成将要切换页面的历史记录了
},
},
};
let router = new VueRouter({
routes: [
{ path: "/first", component: ff },
{ path: "/second", component: ss },
{ path: "/", redirect: "first" },
],
});
let vm = new Vue({
el: "#app",
router,
data: {
aniName: "",
},
watch: {
// $route 是一个属性, watch可以向监听普通属性一样,监听路由变化
$route(to, from) {
if (to.path == "/second") {
this.aniName = "go";
} else if ((to.path = "first")) {
this.aniName = "back";
}
},
},
});
</script>
</body>
</html>
效果如下：
浙公网安备 33010602011771号