vue-resource 路由带参数传参

Posted 2021-03-07 yunjiao

 1 <!-- 第一种jquery方式进行路由传参 -->
 2 
 3  <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->
 4 <router-link to="/login?id=10&name=zs">登录</router-link>
 5 
 6 // vue-router实例化
 7 var router = new VueRouter({
 8     routes:[
 9         { path: ‘/login‘, component: login },
10     ]
11 })
12 //查询id
13 console.log(this.$route.query.id)
14 
15 
16 
17 <!-- 第二种params方式进行路由传参 -->
18 
19  <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 需要修改 路由规则的 path 属性 -->
20 <router-link to="/login/12/ls">登录</router-link>
21 // vue-router实例化
22 var router = new VueRouter({
23       routes: [
24         { path: ‘/login/:id/:name‘, component: login },
25       ]
26     })
27 //查询id
28 console.log(this.$route.params.id)