第七章路由 75 路由传参-使用query方式传递参数

 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?id=10&name=zs">登录</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.query.id}}---{{$route.query.name}}</h1>',
27         data(){
28           return{
29             msg:'123'
30           }
31         },
32         created(){//组件的生命周期
33           // console.log(this.$route)
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         {path:'/login',component:login},
46         {path:'/register',component:register}
47         ]
48       })
49 
50           //创建 Vue 实例，得到 ViewModel
51           var vm =  new Vue({
52               el:'#app',
53         data:{
54           msg:''
55         },
56         methods:{},
57         //router:router
58         router
59           });
60       </script>
61   </body>
62 </html>

posted on 2019-06-12 11:12 songsong_p_blue 阅读(491) 评论(0) 收藏举报

第七章 路由 75 路由传参-使用query方式传递参数

第七章路由 75 路由传参-使用query方式传递参数