vue.js中路由传递参数

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

知识点：vue路由传递参数，第二个页面(A.B页面)拿到参数，使用参数

方法一：使用 <router-link :to="{name:'edithospital',params:{hid:101}}">编辑</router-link>

1.在路由配置中添加

{
      name:'edithospital',             \\路由的名字
      path: '/edithospital/:hid',      \\路由中添加要传递的参数：hid
      component: resolve => require(['../components/page/hospital/EditHospital.vue'], resolve)
}

. A页面

<router-link :to="{name:'edithospital',params:{hid:101}}">编辑</router-link> \\101是变量，可根据实际情况改变

\\name是路由的名字，params是传递的参数

3. B页面 <template><template>中添加

{{$route.params.hid}}     // 101

方法二：<button @click="handleEdit(scope.$index, scope.row)"> 编辑</button>

1.同上

2.A页面

handleEdit(index, row) {
this.$router.push({
name: 'edithospital',
params: {
hid: row.hid //row.hid为变量
}
})
},3.同上
--------------------------------------------------------------------------------------------------------------------------------------
效果参考：
可参考：1.https://segmentfault.com/q/1010000009749320
2.http://blog.csdn.net/wy01272454/article/details/77869442?locationNum=7&fps=1