vue跳转页面打开新窗口,并携带与接收参数方式

在Vue中，我们可以通过router实例和router-link标签来实现页面跳转。当需要在新窗口中打开一个页面并携带参数时，可以使用window.open方法和URLSearchParams对象来实现。

以下是其中一种实现方式的代码：

<template>
  <!--使用router-link标签指定跳转到新页面的路径-->
  <router-link :to="{path: '/newPage', query: {param1: 'value1', param2: 'value2'}}" target="_blank">打开新页面</router-link>
</template>

//在路由中定义新页面的路由
{
  path: '/newPage',
  name: 'NewPage',
  component: NewPage
}

//在新页面中接收参数
<template>
  <div>
    <p>参数1：{{param1}}</p>
    <p>参数2：{{param2}}</p>
  </div>
</template>
<script>
export default {
  name: 'NewPage',
  data() {
    return {
      param1: '',
      param2: ''
    }
  },
  created() {
    //获取参数
    const params = new URLSearchParams(this.$route.query)
    this.param1 = params.get('param1')
    this.param2 = params.get('param2')
  }
}
</script>

另一种实现方式是通过在新页面中直接读取浏览器地址栏中的参数值。

以下是代码示例：

<template>
  <!--使用普通的a标签打开新页面，在href中指定新页面的路径和参数-->
  <a :href="newUrl" target="_blank">打开新页面</a>
</template>

<template>
  <div>
    <p>参数1：{{param1}}</p>
    <p>参数2：{{param2}}</p>
  </div>
</template>
<script>
export default {
  name: 'NewPage',
  data() {
    return {
      param1: '',
      param2: ''
    }
  },
  created() {
    //获取参数
    const urlParams = new URLSearchParams(window.location.search)
    this.param1 = urlParams.get('param1')
    this.param2 = urlParams.get('param2')
  },
  computed: {
    //组装新窗口打开的链接地址和参数
    newUrl() {
      const baseUrl = window.location.href.split('?')[0] //获取当前页面地址，不包含参数部分
      return `${baseUrl}?param1=value1&param2=value2`
    }
  }
}
</script>

以上两种方式，都可以实现在新窗口中打开页面并携带参数，要根据实际情况选择合适的实现方式。