vue 跳转时打开新页面的两种方法

Vue.js 中，跳转页面通常有两种常用的方法：

1. **Vue Router**：如果你正在使用 Vue Router 这个官方推荐的路由库，可以使用 `this.$router.push` 或者 `this.$router.go` 方法来导航到新的路由。例如：

   // 使用 push
   this.$router.push('/new-page');
   
   // 或者使用 go
   this.$router.go(1); // 向前跳转一页，0表示当前页，1表示下一页

2. **window.location**：直接操作浏览器的历史记录和 URL，这不需要任何外部库。例如：

   // 使用 window.location.href
   window.location.href = 'https://www.new-url.com';

这两种方法都可以在Vue组件中实现页面间的跳转，`Vue Router`提供了更丰富的功能和状态管理能力，而直接操作`location`则更为简单直接。

相关问题

vue跳转路由打开新页面

在Vue中，可以使用`window.open()`方法在新页面中打开指定的路由页面。你可以使用`this.$router.resolve()`方法来解析要跳转的路由，并获取目标路由的信息，包括`href`属性。然后，你可以将`href`作为参数传递给`window.open()`方法，同时指定`'_blank'`作为第二个参数，以在新页面中打开路由页面。 下面是一个示例代码：

toDetail(e) {
  const newRoute = this.$router.resolve({ name: 'detail', params: { id: e } });
  window.open(newRoute.href, '_blank');
}

在上述示例中，我们使用`toDetail`方法来处理跳转到新页面的逻辑。首先，我们使用`this.$router.resolve()`方法来解析名为`detail`的路由，并通过`params`属性传递路由参数。然后，我们将解析得到的路由信息的`href`属性作为参数传递给`window.open()`方法，并指定`'_blank'`作为第二个参数，以在新页面中打开该路由页面。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue路由跳转传参或打开新页面跳转](https://blog.csdn.net/m0_66722601/article/details/130357615)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue-router跳转时打开新页面的两种方法](https://download.csdn.net/download/weixin_38592332/13586213)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

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 组件作为路由渲染的容器。