vue button按钮进行链接转跳、转跳传值以及取值

一、请求页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参数