Vue中,你可以使用router-link组件或编程式导航来实现页面跳转。如果你想在跳转时打开一个新的页面(即新标签页或新窗口),你可以使用target="_blank"属性或编程式导航的replace方法。
下面是两种方法的示例:
- 使用router-link组件:
vue
<template>
<router-link :to="url" target="_blank">打开新页面</router-link>
</template>
<script>
export default {
data() {
return {
url: '/new-page' // 目标页面的路径
};
}
};
</script>
2.使用window.open方法:
你可以使用JavaScript的window.open方法来打开一个新的标签页,并传递所需的参数
window.open('/ticket/historyPrice?name=' + obj.H航司名 + '&fn=' + obj.H航班号 + '&from=' + obj.C出发机场 + '&to=' + obj.D到达机场 + '&date=' + obj.C出发时间_Date, '_blank');
//例子1:
//如果你的目标页面/ticket/historyPrice在当前组件的目录下,你可以这样写路径:
window.open('./ticket/historyPrice?name=' + obj.H航司名 + '&fn=' + obj.H航班号 + '&from=' + obj.C出发机场 + '&to=' + obj.D到达机场 + '&date=' + obj.C出发时间_Date, '_blank');
//如果你希望在项目的根目录下打开新的页面,你可以这样写路径:
window.open('/ticket/historyPrice?name=' + obj.H航司名 + '&fn=' + obj.H航班号 + '&from=' + obj.C出发机场 + '&to=' + obj.D到达机场 + '&date=' + obj.C出发时间_Date, '_blank');
请注意,在使用window.open方法时,需要将参数拼接到URL中,并通过_blank参数指定在新标签页中打开页面。
export default {
mounted() {
const name = this.$route.query.name;
const fn = this.$route.query.fn;
const from = this.$route.query.from;
const to = this.$route.query.to;
const date = this.$route.query.date;
// 在这里使用接收到的参数进行相应的操作
}
}