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.同上
--------------------------------------------------------------------------------------------------------------------------------------
效果參考：


可參考：1.https://segmentfault.com/q/1010000009749320
 2.http://blog.csdn.net/wy01272454/article/details/77869442?locationNum=7&fps=1