vue3.2版本 在浏览器打开一个新窗口 和 在页面弹出新窗口的写法（传参和接收参数）

第一种：浏览器打开一个新窗口

//模板传值到编辑器
<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const jumpPhoto = (item: any) => {
  const {href} =  router.resolve({
    path:'/photo-editor',//路径
    query:{
      moId: item.moId,
      sceneId: item.sceneId,
      proId: item.proId,
    }//传参
  });
  window.open(href)
};
</script>

接收参数

<script lang="ts" setup>
import { onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
onMounted(()=>{
  console.log(route.query,"我的作品编辑器")
})
</script>

 

第二种：在页面弹出新窗口

//跳到模板详情页
<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const details = (item: any) => {
  const id = reactive({
    moId: item.moId,
  });
// name: "groupSettings"要跳的页面
// query: id要传的参数
// params: { a: route.path }当前页面的路径
  router.push({ name: "groupSettings", query: id, params: { a: route.path } });
};
</script>

在另一个页面接收参数

<script lang="ts" setup>
import { onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
onMounted(() => {
  // console.log(route.query)收到另一页面传过来的参数
 //console.log(route.query)判断是从哪个页面过来的
  if (router.params.a == "/collectList") {

}
</script>