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> 效果如下：
<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> 效果如下：
标签：vue,translateX,back,transform,go,组件,first,路由,页面 来源： https://www.cnblogs.com/yangcaicai/p/14193925.html