其他分享
首页 > 其他分享> > vue路由组件过渡

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> 效果如下:

 

 

 

 

标签:vue,translateX,back,transform,go,组件,first,路由,页面
来源: https://www.cnblogs.com/yangcaicai/p/14193925.html