window.open传参vue获取参数

可以通过URL参数的方式将参数传递给新打开的窗口，然后在新窗口中通过window.location.search获取URL参数，再用vue的路由或者状态管理器来传递参数。

例如，以下代码将参数id和name传递给新窗口：

let id = 1;
let name = 'John';
window.open(`/newPage?id=${id}&name=${name}`);

在新窗口中可以通过以下方式获取参数：

let params = new URLSearchParams(window.location.search);
let id = params.get('id');
let name = params.get('name');

然后可以将参数存储在vue的状态管理器中：

this.$store.commit('setId', id);
this.$store.commit('setName', name);

或者通过路由传递参数：

this.$router.push({ path: '/newPage', query: { id: id, name: name } });

然后在新页面中可以通过$route.query来获取参数：

let id = this.$route.query.id;
let name = this.$route.query.name;

相关问题

vue使用 window.open传参和接受参数

在Vue中使用window.open进行页面跳转并传递参数，可以通过在URL后面拼接参数的方式来实现。例如：

const params = {
  name: 'John',
  age: 30,
  gender: 'male'
}
const url = `http://example.com/?${encodeURIComponent(JSON.stringify(params))}`
window.open(url)

在新打开的页面中，可以使用以下代码来获取传递过来的参数：

const paramsString = window.location.search.substr(1)
const params = JSON.parse(decodeURIComponent(paramsString))
console.log(params.name) // John
console.log(params.age) // 30
console.log(params.gender) // male

其中，`window.location.search`返回URL中的查询字符串（即`?`后面的部分），`substr(1)`去掉查询字符串中的`?`，`decodeURIComponent()`解码查询字符串中的特殊字符，最后通过`JSON.parse()`将查询字符串转化为对象。

vue window.open 新vue页面

### 回答1：
您好，如果您想在Vue中打开一个新页面，可以使用JavaScript中的window.open()方法。您可以在Vue组件中使用该方法来打开一个新的Vue页面。例如：

<template>
  <div>
    <button @click="openNewPage">打开新页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    openNewPage() {
      window.open('/new-page', '_blank');
    }
  }
}
</script>

在上面的代码中，我们在Vue组件中定义了一个方法openNewPage()，当用户点击按钮时，该方法会调用window.open()方法来打开一个新的Vue页面。您可以将/new-page替换为您想要打开的页面的URL。

### 回答2：
Vue.js 是一个流行的前端框架，用于开发现代 Web 应用程序。Vue 提供了一些流行的指令和组件，如 v-bind 和 v-model，可以轻松地构建交互式的用户界面。在某些情况下，我们需要使用 JavaScript API 中的 window.open 方法在新窗口中打开一个新的 Vue 页面。

Vue.js 提供了一些选项，可以将应用程序渲染为不同类型的应用程序，例如单页应用程序（SPA）或多页应用程序（MPA）。SPA 应用程序只加载一个 HTML 页面，并使用 JavaScript 和 Ajax 动态更改内容。MPA 应用程序则以不同的 HTML 页面形式呈现内容。

如果我们想要在新窗口中打开 Vue 页面，可以使用 window.open 方法打开一个新窗口，然后在该窗口中呈现 Vue 应用程序。在 window.open 方法中，我们可以传递应用程序 URL 和窗口参数。一些常见的窗口参数包括窗口大小，位置，滚动条，工具栏等。

当我们在新窗口中打开 Vue 页面时，我们需要确保新 Vue 页面可以正常工作。这意味着我们需要在应用程序的 JavaScript 中包含正确的 Vue.js 库和组件。我们还需要确保应用程序可以正确加载和处理外部资源，例如样式表，图像和脚本文件。

总之，Vue.js 提供了很多选项用于构建现代 Web 应用程序，包括使用 window.open 方法在新窗口中打开新的 Vue 页面。通过正确加载和配置组件和资源，我们可以确保新的 Vue 页面可以正常工作并提供所需的功能。

### 回答3：
在Vue中使用window.open打开新页面需要注意以下几点：

1. 在Vue组件中打开新页面需要使用Vue Router来完成。因此，首先需要引入Vue Router并设置路由。

2. 在Vue组件的方法中使用window.open来打开新页面。例如，在单击按钮时打开新页面：

<button @click="openNewPage">打开新页面</button>

export default {
  methods: {
    openNewPage() {
      window.open('/newpage', '_blank');
    }
  }
}

在上面的示例中，单击按钮将触发openNewPage方法，在该方法中使用window.open打开新页面。

3. 在Vue Router中定义新页面的路由。例如：

import Vue from 'vue'
import Router from 'vue-router'

import Home from './views/Home.vue'
import NewPage from './views/NewPage.vue'

Vue.use(Router)

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

在上面的示例中，使用Vue Router定义了两个路由，其中path为'/'的路由对应Home组件，path为'/newpage'的路由对应NewPage组件。

注意：使用window.open打开的新页面必须在Vue Router中定义对应的路由，否则将无法找到该页面。否则会出现404错误。

4. 在新页面的vue组件中定义对应的内容。例如：

<template>
  <div class="new-page">
    <h1>这是一个新页面</h1>
  </div>
</template>

<script>
export default {
  name: 'NewPage'
};
</script>

在上面的示例中，定义了一个新页面的组件，该组件包含一个h1标签，用于显示页面的内容。

总结：

在Vue中使用window.open打开新页面需要注意以上几点。需要在Vue组件中通过Vue Router定义路由，在方法中使用window.open打开页面，同时在新页面的Vue组件中定义对应的内容。