vue3新开窗口并传参

vue3新开窗口并传参，怎么搞呢？这里有个例子：

1、组件1

点击“浏览”，打开一个新页面（组件2）。

<template>
	<div class="browse" @click="browseIt(fd)">浏览</div>
</template>

<script>
import { defineComponent, toRefs, reactive } from "vue";
import { useRouter } from "vue-router"; //引入useRouter

export default defineComponent({
  setup() {
    const router = useRouter();
    const browseIt = (fd) => {
      const to = router.resolve({
        name: "ResourceDetail", //这里是跳转页面的name，要与路由设置保持一致
        params: { id: fd.id },
      });
      window.open(to.href, "_blank");
    };

    return {
      browseIt,
    };
  },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2、组件2
采用了vue2的写法，组件1是vue3写法。我其实觉得后者还可以，反倒是vue3越改越让人看不懂。

<script>
export default {
  data () {
    return {
      id: this.$route.params.id,
      result: [],
      total: 0,
    };
  },
  computed: {
    getId () {
      return this.$route.params.id;
    },
  },
  watch: {
    getId (val) {
      this.id = val;
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3、路由
组件1中，使用了这样的代码

const to = router.resolve({
  name: "ResourceDetail", //这里是跳转页面的name，要与路由设置保持一致
  params: { id: fd.id },
});
1
2
3
4

其实这个ResourceDetail在路由表中已经定义：