vue (version：1.0.28)
vue-router (version:0.7.13)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>vue路由的嵌套</title> 8 <script src="bower_components/vue/dist/vue.min.js"></script> 9 <script src="bower_components/vue-router/dist/vue-router.min.js"></script> 10 </head> 11 <body> 12 <div id="app"> 13 <ul> 14 <li><a v-link="{path:'/home'}">主页</a></li> 15 <li><a v-link="{path:'/news'}">新闻</a></li> 16 </ul> 17 <div> 18 <router-view></router-view> 19 </div> 20 </div> 21 <template id="home"> 22 <h2>我是主页内容</h2> 23 <ul> 24 <li><a v-link="{path:'/home/login/eric'}">登录</a></li> 25 <li><a v-link="{path:'/home/reg/lucy'}">注册</a></li> 26 </ul> 27 <div> 28 <router-view></router-view> 29 </div> 30 </template> 31 <template id="news"> 32 <h2>我是新闻页内容</h2> 33 <ul> 34 <li><a v-link="{path:'/news/detail/001'}">我是第一条新闻</a></li> 35 <li><a v-link="{path:'/news/detail/002'}">我是第二条新闻</a></li> 36 </ul> 37 <div> 38 <router-view></router-view> 39 </div> 40 </template> 41 <template id="detail"> 42 {{$route.params |json}} 43 <hr> 44 {{$route.path |json}} 45 <hr> 46 {{$route.query|json}} 47 </template> 48 49 <template id="login"> 50 <h3>登录姓名:{{$route.params|json}}</h3> 51 </template> 52 <template id="reg"> 53 <h3>注册姓名:{{$route.params|json}}</h3> 54 </template> 55 <script> 56 // 第一步准备根组件 57 var App=Vue.extend(); 58 var Home=Vue.extend({ 59 template:"#home" 60 }); 61 var News=Vue.extend({ 62 template:"#news" 63 }) 64 var Login=Vue.extend({ 65 template:'#login' 66 }) 67 var Reg=Vue.extend({ 68 template:'#reg' 69 }) 70 var Detail=Vue.extend({ 71 template:'#detail' 72 }) 73 var router=new VueRouter();//第二步：实例化一个VueRouter对象 74 router.map({ //第三步：关联路由 75 'home':{ 76 component:Home, 77 subRoutes:{ 78 'login/:name':{ 79 component:Login 80 }, 81 "reg/:name":{ 82 component:Reg 83 } 84 } 85 }, 86 'news':{ 87 component:News, 88 subRoutes:{ 89 'detail/:id/':{ 90 component:Detail 91 } 92 } 93 } 94 }); 95 router.start(App,"#app");//第四步：启动路由 96 router.redirect({//第五步：重定向 97 '/':'/home' 98 }) 99 </script> 100 </body> 101 </html>