第七章路由 76 路由传参-使用params方式传递路由参数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
 8     <title>Document</title>
 9     <!--1.导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
11     <script src="../lib/vue-router-3.0.6.js"></script>
12   </head>
13 
14   <body>
15       <div id="app">
16       <!-- 如果在路由中，使用查询字符串，给路由传递参数，则 不需要修改 路由规则的path属性 -->
17       <router-link to="/login/12/ls">登录</router-link>
18       <router-link to="/register">注册</router-link>
19 
20       <router-view></router-view>
21       </div>
22 
23       <script>
24 
25       var login={
26         template:'<h1>登录 --- {{$route.params.id}} --- {{$route.params.name}}</h1>',
27         data(){
28           return{
29             msg:'123'
30           }
31         },
32         created(){//组件的生命周期
33           console.log(this.$route.params.id)
34           // console.log(this.$route.query.id)
35 
36         }
37       }
38 
39       var register={
40         template:'<h1>注册</h1>'
41       }
42 
43       var router = new VueRouter({
44         routes:[
45         //:id，这里的:是占位符
46         {path:'/login/:id/:name',component:login},
47         {path:'/register',component:register}
48         ]
49       })
50 
51           //创建 Vue 实例，得到 ViewModel
52           var vm =  new Vue({
53               el:'#app',
54         data:{
55           msg:''
56         },
57         methods:{},
58         //router:router
59         router
60           });
61       </script>
62   </body>
63 </html>

第七章 路由 76 路由传参-使用params方式传递路由参数

第七章路由 76 路由传参-使用params方式传递路由参数