vue改变路由地址同时打开新窗口
时间: 2023-08-25 16:04:58 浏览: 117
如果你想在Vue中改变路由地址的同时在新窗口中打开链接,你可以使用Vue Router和`window.open()`方法来实现。
首先,确保你已经安装了Vue Router并进行了相应的配置。然后,你可以在点击事件处理程序中使用`$router.push()`方法来改变路由地址,并在相同的处理程序中使用`window.open()`方法打开新窗口。
下面是一个示例代码:
```html
<template>
<div>
<button @click="openNewWindow">打开链接</button>
</div>
</template>
<script>
export default {
methods: {
openNewWindow() {
this.$router.push('/new-route'); // 改变路由地址
window.open('https://www.example.com', '_blank'); // 在新窗口中打开链接
}
}
}
</script>
```
在上面的示例中,我们在点击事件处理程序中调用`this.$router.push('/new-route')`来改变路由地址为'/new-route'。然后,我们使用`window.open()`方法打开新窗口,并将链接"https://www.example.com"作为参数传递给它。`'_blank'`参数表示在新窗口中打开链接。
这样,当用户点击按钮时,Vue会改变路由地址并打开新的链接在新窗口中显示。
阅读全文