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> ```