vue中如何配置路由使得点击展开新窗口

要使点击路由链接时在新窗口中打开页面，需要在路由配置中添加target属性。

例如，假设我们有一个名为“about”的路由链接，我们可以将其配置为在新窗口中打开：

{
  path: '/about',
  name: 'about',
  component: About,
  meta: { target: '_blank' } // 添加target属性
}

然后，在模板中使用<router-link>时，可以将target属性设置为$route.meta.target：

<router-link :to="{ name: 'about' }" target="$route.meta.target">About</router-link>

现在，当用户点击“关于”链接时，将在新窗口中打开“关于”页面。

相关问题

vue3路由点击 怎么打开新窗口

在Vue3中，如果你想通过路由点击打开新窗口（即弹出一个新的浏览器标签页），你可以使用`window.open()`方法。通常，这会在组件内的某个按钮或链接上绑定`@click`事件，并在处理函数中调用`window.open()`。

例如，在一个vue-router的组件里：

<template>
  <button @click="openNewWindow">点击打开新窗口</button>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

function openNewWindow() {
  const url = '/your-desired-url'; // 替换为你想要跳转的URL
  window.open(url, '_blank'); // 第二个参数 '_blank' 表示新窗口打开
}
</script>

在这个例子中，当用户点击“点击打开新窗口”按钮时，会新开一个窗口并跳转到指定的路由。

vue改变路由地址同时打开新窗口

如果你想在Vue中改变路由地址的同时在新窗口中打开链接，你可以使用Vue Router和`window.open()`方法来实现。

首先，确保你已经安装了Vue Router并进行了相应的配置。然后，你可以在点击事件处理程序中使用`$router.push()`方法来改变路由地址，并在相同的处理程序中使用`window.open()`方法打开新窗口。

下面是一个示例代码：

<template>
  <div>
    <button @click="openNewWindow">打开链接</button>
  </div>
</template>

<script>
export default {
  methods: {
    openNewWindow() {
      this.$router.push('/new-route'); // 改变路由地址

      window.open('https://www.example.com', '_blank'); // 在新窗口中打开链接
    }
  }
}
</script>

在上面的示例中，我们在点击事件处理程序中调用`this.$router.push('/new-route')`来改变路由地址为'/new-route'。然后，我们使用`window.open()`方法打开新窗口，并将链接"https://www.example.com"作为参数传递给它。`'_blank'`参数表示在新窗口中打开链接。

这样，当用户点击按钮时，Vue会改变路由地址并打开新的链接在新窗口中显示。