vue 解决使用window.open打开新窗口功能导致的session丢失

最新推荐文章于 2024-09-03 10:15:59 发布

鎏云轩

最新推荐文章于 2024-09-03 10:15:59 发布

阅读量2.8k

点赞数

本文链接：https://blog.csdn.net/qq_16932445/article/details/113888350

版权

这篇博客介绍了如何将使用window.open打开新窗口的方式转换为Vue应用中的router-link标签，以实现页面间的导航。通过修改render函数，利用router-link的to属性结合tag和target属性，成功实现了点击表格项时打开新窗口的效果，同时保留了原有的功能和样式。

摘要由CSDN通过智能技术生成

使用window.open方式打开窗口替换为router-link标签

直接看代码：

<div class="content-table">
          <Table :columns="pipelinecolumns" :data="pipelineList">
          </Table>
</div>

pipelinecolumns: [
  {
    title: 'xxx名称',
    key: 'name',
    tooltip: true,
    render: (h, params) => {
      // TODO原有方式
      // return h('span', {
      //   on: {
      //     click:()=>{
      //       this.toDrawer(params.row)
      //     }
      //   },
      //   style: {
      //     color: '#0a6eb5',
      //     cursor: 'pointer'
      //   },
      //   attrs: {
      //     title: params.row.name
      //   }
      // }, params.row.name);

     //TODO 改为使用router-link方式打开窗口
     //注意tag='a'和target='_blank'属性需配合使用
      return h('router-link', {
        style: {
          display: 'inline-block',
          width: '100%',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          color: '#0a6eb5',
          'vertical-align': 'middle',
          cursor: 'pointer',
        },
        attrs: {
          title: params.row.name,
          tag: 'a',
          target: '_blank',
          to: `${apiUrl.pipelineHome.workflowdrawer}?id=${this.$route.query.id}&pipelineId=${params.row.id}`
        },
      }, params.row.name)


    }
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 160,
    render:(h, params)=>{
      return h('span',{}, params.row.createTime)
    }
  },
],

methods: {
    //toDrawer (row) {
    //  window.open(
    //          `${apiUrl.pipelineHome.workflowdrawer}?id=${this.$route.query.id}&pipelineId=${row.id}`
  //    );
   // },
}