router-link跳转新子页面
时间: 2023-08-23 15:12:56 浏览: 218
在Vue中,可以使用<router-link>标签来实现路由跳转。如果要在新的子页面中打开链接,可以使用target="_blank"属性。在Vue2版本中,<router-link>标签是支持target="_blank"属性的。例如,你可以在<router-link>标签中添加target="_blank"属性来在新的子页面中打开链接。具体的代码示例如下:
<router-link target="_blank" :to="{ path: '/home', params: { id: '8' } }">新页面打开home页</router-link>
这样,当你点击这个链接时,会在新的子页面中打开"/home"路径对应的页面,并且传递参数id为8。你也可以使用编程式导航来实现在新的子页面中打开链接。具体的代码示例如下:
this.$router.push({ path: '/catalog', query: { id: '1' } });
这样,当你调用这个代码时,会在新的子页面中打开"/catalog"路径对应的页面,并且传递查询参数id为1。希望这个回答对你有帮助!
相关问题
router-link跳转到新页面
### 如何使用 `router-link` 实现页面跳转
在 Vue.js 中,`<router-link>` 是一个核心组件,用于实现页面间的导航功能。该组件可以根据其属性动态生成 `<a>` 标签,并绑定必要的事件以触发路由跳转[^1]。
以下是基本的 `<router-link>` 使用方法:
```html
<template>
<div>
<!-- 基本用法 -->
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<!-- 如果需要传递参数 -->
<router-link :to="{ name: 'UserProfile', params: { userId: 123 }}">User Profile</router-link>
<!-- 替代写法:通过 query 参数传参 -->
<router-link :to="{ path: '/search', query: { q: 'Vue' }}">Search</router-link>
</div>
</template>
```
#### 跳转到新标签页的示例
如果希望 `<router-link>` 的目标链接能够在新的浏览器标签页中打开,则可以通过设置 `tag="a"` 和 `target="_blank"` 来实现此目的[^3]。具体代码如下所示:
```html
<template>
<div>
<!-- 新标签页跳转 -->
<router-link
:to="{ path: '/details' }"
tag="a"
target="_blank"
>
Open Details in New Tab
</router-link>
</div>
</template>
```
在此示例中,`:to` 动态绑定了路径 `/details`,而 `tag="a"` 将 `<router-link>` 渲染为标准 HTML 锚点标签,从而允许我们添加 `target="_blank"` 属性来开启新窗口或标签页的功能[^3]。
### 注意事项
当使用 `target="_blank"` 打开外部链接或者内部路由时,建议始终附加 `rel="noopener noreferrer"` 属性,这样可以防止新开的页面获取对原始页面的访问权限,提高安全性[^3]。
```html
<router-link
:to="{ path: '/external-site' }"
tag="a"
target="_blank"
rel="noopener noreferrer"
>
External Site
</router-link>
```
router-link跳转新页面
要在新页面中打开路由链接,可以通过设置`target="_blank"`属性来实现。例如:
```html
<router-link to="/" target="_blank">Go to Home</router-link>
```
这将在新标签页中打开指向主页的路由链接。如果你想在新标签页中打开所有路由链接,可以使用`<a>`标签和`target="_blank"`属性,而不是`<router-link>`。
```html
<a href="/" target="_blank">Go to Home</a>
```
阅读全文
相关推荐














