vue-router 的 router.push 不能新开窗口吗？

• Z时代
• 2024-03-03
• 分类：IT

const handleJump = (keyword_task_id) => {
      router.push({
        name: "HistoryParse",
        query: { keyword_task_id },
        target: "_blank",
      });
    };

我增加了 target: "_blank", 但是还是在本页打开的，而不是新开一个浏览器 tab 窗口

为什么？

完整代码如下：

<template>
  <div>
    <a-input-number
      v-model:value="limit"
      :placeholder="'请输入limit'"
      style="width: 200px; margin-right: 16px"
    />
    <a-input-number
      v-model:value="lenParseResultListGte"
      :placeholder="'请输入len_parse_result_list_gte'"
      style="width: 200px; margin-right: 16px"
    />
    <a-button type="primary" @click="handleSearch"> 查询 </a-button>
    <a-table :columns="columns" :dataSource="dataSource" :pagination="false">
      <template #add_a_for_jump_to_parse_page="{ record }">
        <span>
          <template v-if="record.len_parse_result_list === null">
            进行中
          </template>
          <template v-else>
            <a
              v-if="record.len_parse_result_list !== 0"
              href="javascript:;"
              @click="handleJump(record.id)"
              title="点击可查看解析详情"
            >
              {{ record.len_parse_result_list }}
            </a>
            <template v-else>
              {{ record.len_parse_result_list }}
            </template>
          </template>
        </span>
      </template>
    </a-table>
  </div>
</template>
<script>
import { ref } from "vue";
import { Table, Input, Button, InputNumber } from "ant-design-vue";
import router from "@/router";
export default {
  components: {
    "a-table": Table,
    "a-input-search": Input.Search,
    "a-button": Button,
    "a-input-number": InputNumber,
  },
  setup() {
    const dataSource = ref([]);
    const searchLoading = ref(false);
    const limit = ref(null);
    const lenParseResultListGte = ref(null);
    const columns = [
      {
        title: "ID",
        dataIndex: "id",
      },
      {
        title: "创建时间",
        dataIndex: "created_at",
      },
      {
        title: "更新时间",
        dataIndex: "updated_at",
      },
      {
        title: "分类",
        dataIndex: "category",
      },
      {
        title: "关键词",
        dataIndex: "keyword",
      },
      {
        title: "公司 ID",
        dataIndex: "company_id",
      },
      {
        title: "数量",
        dataIndex: "nums",
      },
      {
        title: "开始日期",
        dataIndex: "start_date",
      },
      {
        title: "是否跳过过滤",
        dataIndex: "skip_filter",
        slots: { customRender: "skipFilter" },
      },
      {
        title: "追踪源 ID",
        dataIndex: "track_source_id",
      },
      {
        title: "优先级",
        dataIndex: "priority",
      },
      {
        title: "元数据 UUID",
        dataIndex: "meta_uuid",
      },
      {
        title: "解析结果列表长度",
        dataIndex: "len_parse_result_list",
        slots: {
          customRender: "add_a_for_jump_to_parse_page",
        },
      },
      {
        title: "推送 UUID",
        dataIndex: "push_uuid",
      },
    ];
    const handleSearch = () => {
      searchLoading.value = true; // 开始请求数据，设置 loading 状态为 true
      let queryParam = "";
      if (limit.value !== null) {
        queryParam += `limit=${limit.value}&`;
      }
      if (lenParseResultListGte.value !== null) {
        queryParam += `len_parse_result_list_gte=${lenParseResultListGte.value}`;
      }
      fetch(
        `http://xxx.cn/keyword/keyword_task/history?${queryParam}`,
        {
          method: "GET",
        }
      )
        .then((response) => response.json())
        .then((data) => {
          dataSource.value = data;
        })
        .finally(() => {
          searchLoading.value = false; // 请求完成，设置 loading 状态为 false
        });
    };
    const handleJump = (keyword_task_id) => {
      router.push({
        name: "HistoryParse",
        query: { keyword_task_id },
        target: "_blank",
      });
    };
    return {
      dataSource,
      columns,
      handleSearch,
      handleJump,
      searchLoading,
      limit,
      lenParseResultListGte,
    };
  },
};
</script>

回答：

问题已解决，chatGPT 自己挖的坑，让 chatGPT 自己解决

解决方案：

target: "_blank" 是用于设置链接在新窗口或新标签页中打开，但是在使用 Vue Router 中，这个属性不会被传递给路由。Vue Router 是基于浏览器的 History API 实现的，所以它不支持在新标签页或新窗口中打开链接。

如果你希望在新窗口或新标签页中打开链接，你可以使用原生的 JavaScript 方法 window.open(url, '_blank') 来打开一个新窗口并加载链接。在你的 handleJump 函数中使用这个方法来实现：

const handleJump = (keyword_task_id) => {
  const url = router.resolve({
    name: "HistoryParse",
    query: { keyword_task_id },
  }).href;
  window.open(url, '_blank');
};

首先，通过 router.resolve() 方法获取目标页面的 URL。然后使用 window.open() 方法在新窗口或新标签页中打开这个 URL。

以上是 vue-router 的 router.push 不能新开窗口吗？ 的全部内容， 来源链接： utcz.com/p/934268.html