Vue跳转路由并在新窗口打开

最新推荐文章于 2025-10-31 09:51:56 发布

原创最新推荐文章于 2025-10-31 09:51:56 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

这篇博客详细介绍了如何在Vue项目中利用Element UI的Table组件，结合El-Link元素实现表格内数据的点击跳转到详情页面。通过`toCard`方法处理点击事件，传递row的cardId并使用`$router`进行页面跳转，同时在新窗口打开详情页。

1、

<el-table-column prop="title" label="标题">
     <template slot-scope="scope">
       <el-link type="info" @click="toCard(scope.row.cardId)">{{scope.row.title}}</el-link>
      </template>
 </el-table-column>

    toCard (id) {
      console.log(id)
      // this.$router.replace('detail')
      var link = this.$router.resolve({
        path: '/detail',
        query: { id } // 要跳转的路由
      })
      window.open(link.href, '_blank')
    },

query ：传的参数

path：跳转的路由