window.open和router.push有啥区别

window.open和router.push是用于在浏览器中导航的两种不同的方法。

window.open是一个JavaScript方法，用于在新的浏览器窗口或标签页中打开一个新的URL。它可以在当前页面之外打开新的页面，这在某些情况下可能会导致用户认证信息丢失或浏览器的弹出窗口阻止功能触发。

router.push是一种前端路由的方法，通常用于在单页面应用程序（SPA）中切换页面。它使用了框架或库（如Vue Router、React Router等）提供的路由功能，通过更改URL来更新应用程序的视图，而无需刷新整个页面。这种方法更适合在同一页面内进行导航，不会打开新的浏览器窗口或标签页。

总而言之，window.open适用于在新窗口或标签页中打开新的URL，而router.push适用于在单页面应用程序中进行页面切换。具体使用哪种方法取决于你的需求和应用程序的架构。

相关问题

this.$router.resolve和$router.push 区别

this.$router.resolve和$router.push都是Vue Router中的方法，用于导航到不同的路由。

this.$router.push用于在当前窗口中导航到指定的路由。它接收一个路由对象作为参数，通过指定路由的名称、参数、查询等信息来生成目标路径，并进行导航跳转。例如，this.$router.push({name: 'details', params: {'id': 233}})表示要导航到名为details的路由，并且传递了id参数为233。这个方法会改变当前的URL，并加载相应的组件。

而this.$router.resolve方法不会进行实际的导航跳转，它只是用于解析目标路由的信息。它也接收一个路由对象作为参数，并返回一个包含目标路由信息的对象。这个方法可以用于获取目标路由的URL，以便在新窗口中打开。例如，const {href} = this.$router.resolve({name: 'foo', query: { bar }})会生成名为foo的路由的URL，并将其赋值给href变量，然后可以使用window.open方法在新窗口中打开这个URL。

所以，$router.push用于实际的导航跳转，而$router.resolve用于解析目标路由的信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [详解新手使用vue-router传参时注意事项](https://download.csdn.net/download/weixin_38557980/13590198)[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* *3* [vue的跳转方式——window.open & router-link标签 & this.$router.push跳转 & this.$router.replace跳转 & ...](https://blog.csdn.net/weixin_44867717/article/details/120503404)[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 ]

window.open跳转页面

window.open是一个用于在浏览器中打开新窗口的方法。在Vue中，可以使用window.open进行页面跳转。 你可以使用以下两种方式进行跳转：
1. 普通跳转（跳转的是路由）：通过Vue Router的resolve方法解析目标路由，得到目标路由的href，然后使用window.open打开新窗口。例如：

   const { href } = this.$router.resolve({
      name: "newDate",
      query: {
         floor_id: this.floor_id
      }
   });
   window.open(href, '_blank');

这样会在新窗口中打开名为"newDate"的路由页面，并传递参数floor_id。

2. 跳转到新的网页：通过window.open直接跳转到新的网页。例如：

   window.open("https://www.baidu.com/", "_blank");

这样会在新窗口中打开百度网页。

需要注意的是，使用window.open进行页面跳转时，大部分浏览器会拦截弹出窗口，因此有些情况下可能无法正常跳转。 在Vue Router 2.1.0版本后，可以使用resolve方法解析路由并获取目标路由的href，然后使用window.open打开新窗口。例如：

  const { href } = this.$router.resolve({
     name: 'foo',
     query: {
        bar
     }
  });
  window.open(href, '_blank');

这样可以在新窗口中打开名为"foo"的路由页面，并传递参数bar。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue的跳转方式——window.open & router-link标签 & this.$router.push跳转 & this.$router.replace跳转 & ...](https://blog.csdn.net/weixin_44867717/article/details/120503404)[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: 100%"]
[ .reference_list ]