vue-router watch監控動畫

紅色框為增改內容！！！

1、src/router4.js

2、index.html設置樣式

3、main.js指向router4.js文件

 

router4.js全部代碼：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const Home={template:`<div>Home內容</div>`}
const parent={template:`<div>parent內容</div>`}

const router=new VueRouter({
    mode:'history',
    base:__dirname,
    routes:[
        {path:'/',component:Home},
        {path:'/parent',component:parent}
    ]
})

new Vue({
    router,
    data(){
        return{
            aaa:'fade'
        }
    },
    template:`
        <div>
            <p>hello</p>
            <ul>
                <li><router-link to="/">/</router-link></li>
                <li><router-link to="/parent">parent</router-link></li>
            </ul>
            <transition :name="aaa" mode="out-in">
                <router-view></router-view>
            </transition>
        </div>
    `,
    watch:{
        '$route'(to,from){
            if(from.path=='/parent'){
                this.aaa='fade1'
            }else{
                this.aaa='fade2'
            }
        }
    }
}).$mount("#app")