vue-router勾子

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

const Home={template:`<div>Home内容</div>`}
// const parent={template:`<div>parent内容</div>`}
const page404={template:`
    <div><h2>error:404</h2></div>`,
    beforeRouteEnter:(to,from,next) => {
        console.log(to)
        console.log(from)
        // next(false)
        next()
    },
    beforeRouteLeave:(to,from,next) => {
        console.log(to)
        console.log(from)
        // next(false)
        next()
    }
}

const router=new VueRouter({
    mode:'history',
    base:__dirname,
    routes:[
        {path:'/',component:Home},
        {path:'/parent',component:parent,
            beforeEnter:(to,from,next) => {
                console.log(to)
                console.log(from)
                // next(false)
                next({path:'/'})
            }
    },
        {path:'*',component:page404}
    ]
})

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>
                <li><router-link to="/qqqqqqqqqqqqqqqqqqqqq">Where not here</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")