Vue中的跳转和打开新窗口
一、如何在Vue中跳转页面
Vue作为一种前端框架,本身是无法实现后端的页面跳转功能的。它只能将页面作为一个整体进行组合和渲染,因此页面跳转往往需要依赖于前端路由和路由跳转来实现。
在Vue中,一般使用Vue Router实现路由跳转。Vue Router提供了router-link
指令和$router
对象,可以实现在同一页面内跳转或跳转到其他页面。
1、使用router-link
实现页面跳转:
<template>
<div>
<router-link to="/about">About Page</router-link>
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>
2、使用$router
实现页面跳转:
<template>
<div>
<button @click="$router.push('/about')">About Page</button>
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>
二、如何打开新窗口
在某些情况下,我们需要在当前页面下打开一个新的窗口,比如在展示某个页面的同时还需要在新的窗口中展示一些信息等。在Vue中,我们可以使用JavaScript的window.open()
方法来打开新窗口。
1、使用window.open()
方法打开新窗口:
<template>
<div>
<button @click="openNewWindow">Open a new window</button>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
openNewWindow() {
window.open('https://www.google.com/', '_blank');
}
}
}
</script>
2、使用Vue Router的router.push()
方法打开新窗口:
<template>
<div>
<button @click="openNewWindow">Open a new window</button>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
openNewWindow() {
window.open(this.$router.resolve({name: 'About'}).href, '_blank');
}
}
}
</script>
三、如何在新窗口中传递数据
在打开新窗口时,我们可能需要在新窗口中传递一些数据,来达到一些特定的需求。在Vue中,我们可以使用Session Storage或Local Storage来实现在不同窗口或标签之间共享数据。
通过以下实例,我们可以在当前页面打开一个新的窗口,在新的窗口中显示当前页面中输入的数据,并允许用户在新的窗口中修改数据,同时在所有窗口中同步修改结果。
<template>
<div>
<form @submit.prevent="submit">
<input type="text" v-model="inputData" />
<button type="submit">Submit</button>
</form>
<button @click="openNewWindow">Open a new window</button>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
inputData: ''
}
},
methods: {
submit() {
window.sessionStorage.setItem('inputData', this.inputData);
},
openNewWindow() {
window.open('/#/newWindow', '_blank');
}
}
}
</script>
<template>
<div>
<input type="text" v-model="inputData" />
<button @click="submit">Submit</button>
<button @click="closeWindow">Close</button>
</div>
</template>
<script>
export default {
name: 'NewWindow',
data() {
return {
inputData: ''
}
},
mounted() {
let inputData = window.opener.sessionStorage.getItem('inputData');
if (inputData) {
this.inputData = inputData;
}
window.addEventListener('storage', (event) => {
if (event.key === 'inputData') {
this.inputData = event.newValue;
}
});
},
methods: {
submit() {
window.opener.sessionStorage.setItem('inputData', this.inputData);
},
closeWindow() {
window.close();
}
}
}
</script>
四、如何在新窗口中传递对象
在某些情况下,我们需要在新窗口中传递一个对象,来传递多个值或函数。在Vue中,我们可以使用JSON.stringify()和JSON.parse()方法来实现对象的传递。
通过以下实例,我们可以在当前页面打开一个新的窗口,将一个对象传递给新窗口,在新的窗口中展示对象,并对对象进行修改,同时在所有窗口中同步修改结果。
<template>
<div>
<form @submit.prevent="submit">
<input type="text" v-model="inputData.name" />
<input type="text" v-model="inputData.age" />
<button type="submit">Submit</button>
</form>
<button @click="openNewWindow">Open a new window</button>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
inputData: {
name: '',
age: ''
}
}
},
methods: {
submit() {
window.sessionStorage.setItem('inputData', JSON.stringify(this.inputData));
},
openNewWindow() {
window.open('/#/newWindow', '_blank');
}
}
}
</script>
<template>
<div>
<input type="text" v-model="inputData.name" />
<input type="text" v-model="inputData.age" />
<button @click="submit">Submit</button>
<button @click="closeWindow">Close</button>
</div>
</template>
<script>
export default {
name: 'NewWindow',
data() {
return {
inputData: {
name: '',
age: ''
}
}
},
mounted() {
let inputData = window.opener.sessionStorage.getItem('inputData');
if (inputData) {
this.inputData = JSON.parse(inputData);
}
window.addEventListener('storage', (event) => {
if (event.key === 'inputData') {
this.inputData = JSON.parse(event.newValue);
}
});
},
methods: {
submit() {
window.opener.sessionStorage.setItem('inputData', JSON.stringify(this.inputData));
},
closeWindow() {
window.close();
}
}
}
</script>