<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>http://www.zhinengshe.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; } </style> <script src="vue.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="app"> <h1>Hello App!</h1> <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> <router-link to="/user/1">Go to user1</router-link> <router-link to="/user/2/clas">Go to user2</router-link> <router-link to="/user/3/clas/3">Go to user3</router-link> <router-link to="/redect">redirect</router-link> <router-link to="/redectname">redirectname</router-link> </p> <router-view></router-view> </div> <script> const Bar = { template: '<div>Bar</div>', beforeRouteEnter(to,from,next){ console.log('this，，Bar-beforeRouteEnter'); }, beforeRouterUpdate(to,from,next){ console.log('this，，Bar-beforeRouterUpdate'); }, beforeRouterLeave(to,from,next){ console.log('this，，Bar-beforeRouterLeave'); } }; const Foo = { template: `<div>Foo <p> <router-link :to="{name:'useruser',params:{grade:111,clas:222}}">foo1</router-link> <router-link to="/foo/foo2/456">foo2</router-link> ----------------- <router-view></router-view> ----------------- </p> </div>`, beforeRouteEnter(to,from,next){ console.log(`this，，Foo-beforeRouteEnter`); }, beforeRouterUpdate(to,from,next){ console.log('this，，Foo-beforeRouterUpdate'); }, beforeRouterLeave(to,from,next){ console.log('this，，Foo-beforeRouterLeave'); } }; const foo1 = { name:'foo1', template: '<div>foo1 + {{$route.params}}</div>', }; const foo2 = { name:'foo2', template: '<div>foo2 + {{$route.params}}</div>', }; const USER = { template: '<div>USER + {{$route.params}}</div>', }; const BOSS = { template: '<div>BOSS + {{$route.params}}</div>', }; const NULL = { template: '<div>NULL + {{$route.params}}</div>', }; const USERERROR = { template: '<div>USERERROR + {{$route.params}}</div>', }; const User = { template: `<div> user + {{$route.params}} <router-link to="/user/1/USER">USER</router-link> <router-link to="/user/1/BOSS">BOSS</router-link> <router-view name="a"></router-view> <router-view name="b"></router-view> </div>`, watch:{ '$route':function(to,from){ //console.log(to); //console.log(from); } }, }; const routes = [ { path:'/redect', redirect:'/bar', }, { path:'/redectname', redirect:{name:'ffoooo11',params:{id:123}}, }, { path: '/foo', component: Foo, name:'ffoooo', children:[ { path:'foo1/:id', component:foo1, name:'ffoooo11' }, { path:'foo2/:name', component:foo2, }, ] }, { path: '/bar', alias:'/a/f/0d/e/r', component: Bar }, { path: '/USER', component: USERERROR , }, { path: '/user/:grade', component: User, children:[ { path:'USER', components:{ a:USER, b:BOSS } } , { path:'BOSS', components:{ a:BOSS, b:User } } ] }, { path: '/user/:grade/clas', component: User }, { path: '/user/:grade/clas/:clas', component: User, name:'useruser' }, { path:'*',component:NULL } ]; const router = new VueRouter({ //mode: 'history', routes }); router.beforeEach( (to,from,next) => { /*console.log(1); console.log(to); console.log(from); console.log(next); console.log(2);*/ }); const app = new Vue({ router }).$mount('#app'); </script> </body> </html>