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>
Day4.7路由传参params方式
猜你喜欢
转载自www.cnblogs.com/zhaohui-116/p/12241485.html
今日推荐
周排行