vue2 只有一个路径 点击一个方法 触发这个路径 出现新的窗口页面 怎么写

如果你只需要设置一个路径，在点击某个按钮时触发该路径，并在新窗口或标签页中打开对应的页面，可以使用 `window.open()` 方法来实现。

首先，在你的模板中添加一个按钮，并绑定点击事件：

<template>
  <div>
    <button @click="openNewWindow">Open New Window</button>
  </div>
</template>

然后，在你的 Vue 实例中定义 `openNewWindow()` 方法，使用 `window.open()` 方法打开新窗口或标签页并跳转到对应的页面：

<script>
export default {
  methods: {
    openNewWindow() {
      window.open('/about', '_blank')
    }
  }
}
</script>

其中，`window.open()` 方法接受两个参数，第一个参数是要打开的页面的 URL，第二个参数是窗口或标签页的名称。在本例中，我们传入了 `/about` 作为要打开的 URL，`'_blank'` 作为窗口或标签页的名称，这样就会在新的窗口或标签页中打开 `about` 页面了。

需要注意的是，在使用 `window.open()` 方法时，浏览器可能会阻止弹出窗口。如果需要在 Vue 项目中使用该方法，建议将其封装在一个组件或插件中，并提供设置项以控制是否允许弹出窗口。

相关问题

vue 页面跳转时怎么打开一个 没有导航的新页面

有多种方法可以实现在 Vue 页面跳转时打开一个没有导航的新页面，以下是其中两种比较常见的方法：

1. 利用 window.open() 方法打开新页面

可以使用 window.open() 方法在 Vue 页面跳转时打开一个新窗口，该窗口没有浏览器的前进或后退按钮以及其他导航工具，实现一个没有导航的新页面。以下是一个示例代码：

// 在 Vue 中调用 window.open() 方法打开一个新窗口
this.$router.push({
  path: '/new-page',
  query: { external: true }
});

在页面中使用 this.$router.push() 方法进行路由的跳转，传入一个包含新页面路径的对象，即可打开一个新窗口。在上述示例代码中，还在 query 参数列表中传入了一个额外的参数 external，用于区分是否是在新窗口中打开的，方便后续的处理操作。

2. 利用 vue-router 插件打开新页面

如果需要在 Vue 中打开一个新页面并且想要利用 Vue 路由器，可以使用 Vue 路由器官方提供的插件 vue-router，根据自己的实际情况选择合适的方法来实现无导航的新页面。

以下是一个示例代码，利用 vue-router 插件打开一个没有导航的新页面：

// 引入 vue-router 插件
import VueRouter from 'vue-router';

// 新页面组件定义
const NewPageComponent = {
  template: '<div>这是一个没有导航的新页面</div>'
};

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/new-page', component: NewPageComponent }
  ]
});

// 在 Vue 实例中注册路由
new Vue({
  el: '#app',
  router,
  methods: {
    // 触发路由跳转
    gotoNewPage: function () {
      this.$router.push('/new-page');
    }
  }
});

以上代码中，首先引入了 vue-router 插件，然后创建了一个新页面组件，接着创建了一个路由实例并注册到 Vue 实例中。在 Vue 方法中，定义了一个触发路由跳转的函数 gotoNewPage()，调用 this.$router.push() 方法实现页面跳转。这里需要注意的是，在使用路由跳转时，需要在 Vue 实例中设置一个 router-view 组件作为路由渲染的容器。

vue中怎么在web页面上打开一个小的新页面

### 回答1：
要在 Vue 中在 web 页面上打开一个新的页面，你可以使用 HTML 的 `target` 属性或 JavaScript 的 `window.open` 函数。

1. 使用 `target` 属性：

<template>
  <a v-bind:href="url" target="_blank">Link</a>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.example.com'
    }
  }
}
</script>

2. 使用 `window.open` 函数：

<template>
  <button @click="openWindow">Open Window</button>
</template>

<script>
export default {
  methods: {
    openWindow() {
      window.open('https://www.example.com', '_blank');
    }
  }
}
</script>

在这两种方法中，`_blank` 表示在新窗口中打开链接。如果你希望在新标签页中打开链接，可以将 `_blank` 替换为 `_blank`。

### 回答2：
在Vue中，可以通过使用<a>标签的target属性来实现在web页面上打开一个小的新页面。

首先，在Vue组件中定义一个链接，并设置target属性为"_blank"，这样点击该链接时就会在新的页面中打开：

<template>
  <div>
    <a href="new_page.html" target="_blank">打开新页面</a>
  </div>
</template>

在上述代码中，href指定了要打开的页面的路径，这里假设为new_page.html。

另外，如果想在点击链接时执行一些JavaScript代码，可以使用@click事件监听器来实现：

<template>
  <div>
    <a href="#" target="_blank" @click="openNewPage">打开新页面</a>
  </div>
</template>

<script>
export default {
  methods: {
    openNewPage() {
      // 在这里添加打开新页面时的逻辑
      window.open('new_page.html', '_blank');
    }
  }
}
</script>

在上述代码中，@click="openNewPage"绑定了一个点击事件监听器，当点击链接时会触发openNewPage方法。在这个方法中，调用window.open函数来打开一个新的页面，其中第一个参数是要打开的页面的路径，第二个参数是打开方式（"_blank"表示在新的页面中打开）。

总之，通过上述方法，就可以在Vue中在web页面上打开一个小的新页面。

### 回答3：
在Vue中，可以通过以下步骤在web页面上打开一个小的新页面：

1. 首先，在Vue项目的根目录下创建一个新的组件文件，例如`NewPage.vue`。

2. 在`NewPage.vue`文件中定义新页面的内容和样式，可以使用Vue提供的各种组件、指令和数据绑定等功能。

3. 在需要打开新页面的按钮或链接的事件处理函数中，使用`this.$router.push()`方法进行页面导航。

例如，可以在某个按钮的点击事件中添加以下代码：`this.$router.push('/newpage')`。其中，`/newpage`是你定义的新页面的路由路径。

4. 在Vue项目的路由配置文件（通常是`router/index.js`）中，添加对新页面的路由配置。

例如，可以在路由配置数组中添加以下代码：

   {
     path: '/newpage',
     name: 'NewPage',
     component: NewPage
   }

其中，`path`是访问新页面的路径，`name`是路由名称，`component`是对应的组件。

5. 保存并运行Vue项目，当点击按钮或链接时，就会打开一个新的小页面，显示`NewPage.vue`组件的内容。

总之，通过定义新页面的组件、导航到新页面的路由和处理相关事件，可以在Vue中很方便地打开一个小的新页面。