<vue-router第三弹>vue-router之路由过渡(前端网备份)
路由过渡其实连接着vue过渡
https://cn.vuejs.org/v2/guide/transitions.html#概述
路由就是基础路由,跳转页面的路右视图得加:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<transition name="fade" mode="out-in"> <router-view></router-view> </transition> <style scoped> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style>
watch下的监听
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div> <Layout> <Sider hide-trigger :style="{height: '100vh',background: '#fff'}"> <Menu @on-select="turnToPage" active-name="1-2" theme="light" width="auto" :open-names="['1']"> <Submenu name="1"> <template slot="title"> <Icon type="ios-navigate"></Icon> Item 1 </template> <MenuItem name="/1/te">Option 1</MenuItem> <!--<MenuItem name="/1/2">Option 2</MenuItem> <MenuItem name="/1/3">Option 3</MenuItem>--> <!-- <MenuItem name="/1/2">Option 2</MenuItem>--> <!--<router-link to="/1/3?id=lisi" ><MenuItem name="">正确</MenuItem></router-link>--> <router-link :to="{ path:'/1/user',query: { id: 123,state:'试试'}}" ><MenuItem name="">2</MenuItem></router-link> <MenuItem name="/1/3">正确</MenuItem> <!--<MenuItem name="/1/3">Option 2</MenuItem>--> <!--<router-link :to="{ name:'r2-4',params: { id: 123,state:'试试'}}" ><MenuItem name="">正确</MenuItem></router-link>--> </Submenu> <Submenu name="2"> <template slot="title"> <Icon type="ios-keypad"></Icon> Item 2 </template> <MenuItem name="2-1">Option 1</MenuItem> <MenuItem name="2-2">Option 2</MenuItem> </Submenu> <Submenu name="3"> <template slot="title"> <Icon type="ios-analytics"></Icon> Item 3 </template> <MenuItem name="3-1">Option 1</MenuItem> <MenuItem name="3-2">Option 2</MenuItem> </Submenu> </Menu> </Sider> <Layout > <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}"> <transition :name="aaa" mode="out-in"> <router-view></router-view> </transition> <router-view name="left" style="color: red;"></router-view> <router-view name="right" style="color: orange;"></router-view> </Content> </Layout> </Layout> </div> </template> <script> export default { data(){ return{ aaa:'fade' } }, methods:{ turnToPage (route) { console.log("route2",route); if(route =="/1/3"){ this.$router.push({path:route,query:{id:1,state:'试试'}}); }else{ this.$router.push(route); } //this.$router.push({path:route,query:{id:1}}); } }, watch: { '$route' (to, from) { console.log(to);console.log(from); if(from.path =='/1/user'){ this.aaa ='fade' }else{ this.aaa ='fade1' } } } } </script> <style scoped> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } .fade1-enter-active, .fade1-leave-active { transition: background 0.5s ease-in,color 0.3s ease-out } .fade1-enter, .fade1-leave-to { background: #42B983; color: orange; } </style>
主要注意的是
<transition :name="aaa" mode="out-in">的name的绑定,以及watch的使用和css3动画的命名,
这里动画只能起到切换路由时候的过程动画