vue3点击子路由,子路由变成新的窗口打开

要实现点击子路由后子路由变成新的窗口打开，可以在Vue Router中使用target属性。具体步骤如下：

1. 在路由配置文件中，定义父路由和子路由的路径。

2. 在父路由对应的组件中，使用<router-link>标签来定义子路由的路径，并设置target属性为"_blank"。

3. 在子路由对应的组件中，编写需要展示的内容。

下面是一个示例代码：

// 路由配置文件

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Detail from '@/views/Detail.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'detail/:id',
        name: 'Detail',
        component: Detail
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

<!-- About.vue -->

<template>
  <div>
    <h1>About Page</h1>
    <router-link :to="{ name: 'Detail', params: { id: '1' } }" target="_blank">Detail 1</router-link>
    <router-link :to="{ name: 'Detail', params: { id: '2' } }" target="_blank">Detail 2</router-link>
  </div>
</template>

<!-- Detail.vue -->

<template>
  <div>
    <h1>Detail Page {{ $route.params.id }}</h1>
  </div>
</template>

在这个示例中，当用户点击About页面上的Detail 1或Detail 2链接时，浏览器会自动打开一个新的窗口，并加载对应的子路由内容。