<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>http://www.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .router-link-active{ font-size: 20px; color:#f60; } .fade-enter-active, .fade-leave-active{ transition: opacity 1s ; } .fade-enter, .fade-leave-to{ opacity: 0 ; } </style> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/r1">GO to foo</router-link> <router-link to="/r2">Go to bar</router-link> <router-view>r1r2</router-view> </div> <script> const c1 = { template:` <div>foo <router-link to="/r1/r11">r11</router-link> <router-link to="/r1/r12">r12</router-link> <transition name="fade"> <router-view>r11r12</router-view> </transition> </div> `, beforeRouteEnter (to, from, next) { console.log(this + `...c1 - beforeRouteEngter`); console.log(to); console.log(from); next(); }, beforeRouteUpdate (to, from, next) { console.log(this + `...c1 - beforeRouteUpdate`); console.log(to); console.log(from); next(); }, beforeRouteLeave (to, from, next) { console.log(this + `...c1 - beforeRouteLeave`); console.log(to); console.log(from); next(); } }; const error = { template:`<div>error</div>` }; const c2 = { template:`<div>bar</div>`, beforeRouteEnter (to, from, next) { console.log(this + `...c2 - beforeRouteEngter`); console.log(to); console.log(from); next(); }, beforeRouteUpdate (to, from, next) { console.log(this + `...c2 - beforeRouteUpdate`); console.log(to); console.log(from); next(); }, beforeRouteLeave (to, from, next) { console.log(this + `...c2 - beforeRouteLeave`); console.log(to); console.log(from); next(); } }; const c11 = { template:`<div>c11</div>`, beforeRouteEnter (to, from, next) { console.log(`c11 - beforeRouteEnter`); console.log(to); console.log(from); next(); }, beforeRouteUpdate (to, from, next) { console.log(`c11 - beforeRouteUpdate`); console.log(to); console.log(from); next(); }, beforeRouteLeave (to, from, next) { console.log(`c11 - beforeRouteLeave`); console.log(to); console.log(from); next(); } }; const c12 = { template:`<div>c12</div>`, beforeRouteEnter (to, from, next) { console.log('c12 - beforeRouteEngter'); console.log(to.matched[0]);//父路由"/r1" console.log(to.matched[1]);//子路由"/r1/r12" if(to.matched.some( r => {return r.meta.r12} )){ next({ //path:'/r2', }); } console.log(from); next(); }, beforeRouteUpdate (to, from, next) { console.log('c12 - beforeRouteUpdate'); console.log(to); console.log(from); next(); }, beforeRouteLeave (to, from, next) { console.log('c12 - beforeRouteLeave'); console.log(to); console.log(from); next(); } }; const routes1 = [ { path:'/r1', component:c1, meta:{r1:true}, children:[ { path:'r11', component:c11, meta:{r11:true} }, { path:'r12', component:c12, meta:{r12:true} } ] }, { path:'/r2', component:c2 }, { path:'/r3', component:c3 }, { path:'*', component:c12 } ]; const router2 = new VueRouter({ routes:routes1 }); const vm = new Vue({ router:router2 }).$mount('#app'); </script> </body> </html>