vue2 点击某一个路由 出现新的窗口页面 怎么写

如果你需要在点击某个路由时，在新的窗口或者标签页中打开对应的页面，可以在 `<router-link>` 标签上添加 `target="_blank"` 属性即可。

例如，你的路由定义如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

那么在你的模板中，可以这样使用 `<router-link>` 标签：

<router-link to="/about" target="_blank">Go to About</router-link>

这样，当你点击这个链接时，就会在新的窗口或标签页中打开 `About` 组件对应的页面。

相关问题

vue打开一个非子路由新的窗口

在Vue中，要打开一个非子路由的新窗口，可以使用原生的JavaScript代码来实现。具体方法如下：

1. 首先，在Vue组件中，需要定义一个方法，用于打开新窗口。例如：

methods: {
  openNewWindow() {
    window.open('/newpage', '_blank')
  }
}

2. 在需要打开新窗口的地方，可以使用v-on指令将openNewWindow方法绑定到一个按钮或其他DOM元素上。例如：

<button v-on:click="openNewWindow()">打开新窗口</button>

3. 在window.open()函数中，第一个参数是要打开的页面的URL地址，第二个参数是打开方式。这里的'_blank'表示在新的标签页或窗口中打开链接。

注意：在浏览器中，由于安全原因，弹出窗口可能会被拦截或被阻止。如果打开新窗口失败，可以考虑在浏览器设置中允许弹出窗口或使用其他方法实现所需功能。

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链接时，浏览器会自动打开一个新的窗口，并加载对应的子路由内容。