vue3.2版本 在浏览器打开一个新窗口 和 在页面弹出新窗口的写法(传参和接收参数)
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>
更多推荐
已为社区贡献2条内容
所有评论(0)