vue button按鈕進行連結轉跳、轉跳傳值以及取值

• 一、請求頁A:element元件 button按鈕 跳轉并傳值
• • 1.在src/router/index.js中 定義vue檔案的路由
  • 2.在button按鈕定義點選事件
  • 3.在點選事件的方法中，定義轉跳和參數指派
• 二、跳轉頁B:接參
• • 1.通過路由擷取參數值
• 三、參考資料：

一、請求頁A:element元件 button按鈕 跳轉并傳值

1.在src/router/index.js中 定義vue檔案的路由

{
      path: 'AAA/BBB',
      component: () => import('@/views/modules/AAA/BBB'),
      name: 'BBB',
      meta: { title: '标題' }
    }
           

2.在button按鈕定義點選事件

<div class="buttonList">
        <el-button type="warning" @click="judgeURL">詳情</el-button>
        <el-button type="warning">XXX</el-button>
        <el-button type="warning">OOO</el-button>
      </div>
           

3.在點選事件的方法中，定義轉跳和參數指派

judgeURL () {
    //BBB 是在路由中定義的name
    this.$router.push({name: 'BBB', query: {id: this.id}})
    },
           

二、跳轉頁B:接參

1.通過路由擷取參數值

在 created 中，通過 this.$route.query.taskId 進行取值。

....
   created () {
     this.taskId = this.$route.query.id;
   },
   ....
           

三、參考資料：

vue.js 通過路由傳遞參數-通過傳入id展示詳情頁面

Vue–通過button跳轉到其他元件并攜帶id參數