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` 组件对应的页面。

相关问题

vue2路由跳转新页面路由注册

### Vue2 中实现页面间路由跳转及新页面路由注册

#### 配置 Vue Router

为了在 Vue2 项目中使用 `vue-router`，首先需要安装该库：

npm install vue-router --save-dev

接着，在项目的根目录创建一个新的文件夹用于存放路由配置文件，通常命名为 `router/index.js` 或者类似的名称。

在此文件内初始化路由器实例，并定义应用中的各个路径对应的组件。下面是一个简单的例子[^3]：

import Vue from 'vue';
import Router from 'vue-router';
// 导入要使用的组件
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

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

之后，在主入口文件（通常是 `main.js`）引入这个路由对象并将其挂载到 Vue 实例上：

import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入刚刚创建的路由模块

new Vue({
    el: '#app',
    render: h => h(App),
    router, // 将其传递给 Vue 实例
});

#### 页面间的导航方式

对于页面之间的导航，可以采用多种方式进行处理。如果希望在同一窗口内部完成切换，则可以直接利用 `<router-link>` 组件来构建链接；而对于那些想要在一个全新的浏览器标签页加载目标地址的情况，则可以通过 JavaScript 的 API 来达成目的[^2]。

以下是几种常见的做法：

##### 使用 `<router-link>` 标签属性 `target="_blank"`

这是最简单的方式之一，只需设置好相应的 URL 和查询参数即可自动实现在新标签页打开的功能：

<router-link target="_blank" :to="{ path: '/about', query: { id: 'someId' } }">前往关于页面</router-link>

##### 利用 `$router.resolve()` 结合原生 JS 函数 `window.open()`

这种方法允许更灵活的操作，比如动态生成链接或是附加额外的数据作为请求的一部分发送出去：

const routeUrl = this.$router.resolve({ path: "/about", query: { id: someId } });
window.open(routeUrl.href, '_blank');

上述两种方案都可以很好地满足不同场景下的需求，具体选择取决于实际应用场景和个人偏好。

#### 动态添加新路由

有时候可能需要在运行时向现有应用程序中增加新的路由规则。这可以通过调用 `addRoutes()` 方法来完成，不过需要注意的是此操作仅适用于 Vue Router v3.x 版本之前的版本。自 v4 开始已经移除了这一特性[^1]。

因此建议尽可能提前规划好所有的路由映射关系，避免后期频繁修改路由表结构造成不必要的麻烦。

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'表示在新的标签页或窗口中打开链接。

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