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)
}
2. 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.同上
--------------------------------------------------------------------------------------------------------------------------------------
效果参考:
![](https://images2018.cnblogs.com/blog/1132642/201711/1132642-20171128203931706-1544423278.png)
可参考:1.https://segmentfault.com/q/1010000009749320
2.http://blog.csdn.net/wy01272454/article/details/77869442?locationNum=7&fps=1