Day4.7路由传参params方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../lib/js/vue.js"></script>
 7     <script src="../lib/js/vue-router.js"></script>
 8 
 9 </head>
10 <body>
11 
12 <div id="app">
13     <router-link to="/login/10/lj">登录</router-link>
14     <router-link to="/register">注册</router-link>
15     <router-view></router-view>
16 </div>
17 <script>
18     var login = {
19         template:'<h1>登录组件- - -{{ $route.params.id }}- - -{{ $route.params.name }}</h1>'
20     };
21     var register = {
22         template:'<h1>注册组件</h1>'
23     };
24     var routerObj = new VueRouter({
25         routes:[
26             { path:'/login/:id/:name',component:login },
27             { path:'/register',component:register }
28         ]
29     });
30     new Vue({
31         el:'#app',
32         data:{},
33         methods:{},
34         router:routerObj
35     })
36 </script>
37 </body>
38 </html>