<vue-router第三弹>vue-router之路由过渡(前端网备份)

路由过渡其实连接着vue过渡
https://cn.vuejs.org/v2/guide/transitions.html#概述
路由就是基础路由，跳转页面的路右视图得加：

<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下的监听

<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动画的命名，
这里动画只能起到切换路由时候的过程动画