vue路由1

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>

 

posted @ 2018-07-12 22:10  juneChen  阅读(202)  评论(0)  编辑  收藏  举报