<router-link to="/mail/index" @click="openNewPage"> <el-dropdown-item>邮件中心</el-dropdown-item> </router-link> methods: { openNewPage() { window.open('/mail/index', '_blank'); } } 这个代码不会在浏览器中打开一个新的页面,怎么回事
时间: 2024-04-14 14:27:14 浏览: 15
抱歉,我之前的回答有误。在Vue中,`<router-link>`组件是用来进行路由导航的,不支持直接设置`target="_blank"`属性来在新标签页中打开链接。
如果你想在点击邮件中心时在新标签页中打开页面,可以使用`<a>`标签并结合`router.push()`方法来实现。
以下是修改后的示例代码:
```html
<a href="/mail/index" target="_blank" @click.prevent="openNewPage">
<el-dropdown-item>邮件中心</el-dropdown-item>
</a>
```
```javascript
methods: {
openNewPage() {
this.$router.push('/mail/index');
}
}
```
在上面的代码中,我们使用`<a>`标签来包装邮件中心的内容,并设置`target="_blank"`属性来在新标签页中打开链接。同时,我们绑定了点击事件`@click.prevent`,并在`openNewPage`方法中使用`this.$router.push()`来进行路由跳转。
这样,当用户点击邮件中心时,链接将在新的标签页中打开。请确保路由路径`/mail/index`是正确的。
相关问题
<router-link to="/mail/index"> <el-dropdown-item>邮件中心</el-dropdown-item> </router-link> 怎么点击在浏览器打开一个新的页面
要在点击邮件中心时在浏览器中打开一个新页面,你可以使用 JavaScript 的`window.open()`方法。
以下是示例代码:
```html
<router-link to="/mail/index" @click="openNewPage">
<el-dropdown-item>邮件中心</el-dropdown-item>
</router-link>
```
```javascript
methods: {
openNewPage() {
window.open('/mail/index', '_blank');
}
}
```
在上面的代码中,我们给`<router-link>`添加了一个点击事件`@click`,并将其绑定到`openNewPage`方法上。在`openNewPage`方法中,我们使用`window.open()`方法来打开一个新页面。第一个参数是要打开的页面的URL,第二个参数`'_blank'`表示在新的标签页中打开。
这样,当用户点击邮件中心时,链接将在浏览器中打开一个新页面。请注意,这里的URL需要设置为正确的路径。
<router-link to="/mail/index"> <el-dropdown-item>邮件中心</el-dropdown-item> </router-link> 怎么点击打开一个新的页面
要在点击邮件中心时打开一个新页面,你可以使用`target="_blank"`属性来指定链接在新标签页中打开。在Vue中,你可以将`<router-link>`包装在一个普通的`<a>`标签中,并将`target="_blank"`添加到`<a>`标签中。
以下是示例代码:
```html
<a href="/mail/index" target="_blank">
<el-dropdown-item>邮件中心</el-dropdown-item>
</a>
```
这样,当用户点击邮件中心时,链接将在新的标签页中打开。请注意,这里的`href`属性需要设置正确的路径。