router-link 标签怎么跳转页面并传参数

在 Vue.js 中使用 `router-link` 标签来实现页面间的跳转。

要在路由之间传递参数，可以使用 `to` 属性，例如：

<router-link :to="{ name: 'user', params: { id: userId }}">User Profile</router-link>

这里的 `name` 属性是要跳转到的路由的名称，`params` 属性是要传递的参数，这个例子中传递了一个 `id` 参数。

在接收参数的路由组件中，可以使用 `$route.params` 访问传递的参数，例如：

export default {
  name: 'UserProfile',
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
}

这个例子中，`userId` 计算属性就可以获取到传递的 `id` 参数。

相关问题

router-link跳转新子页面

在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跳转到其他页面

### Vue Router 中 `router-link` 的页面跳转

在 Vue.js 应用程序中，`<router-link>` 是用于导航到不同路由的组件。通过使用 `<router-link>` 可以创建链接来实现页面之间的切换。

#### 基本语法
最简单的形式如下所示：

<!-- 导航至具有指定路径的目标 -->
<router-link to="/home">Home</router-link>

这种方式适用于直接提供目标 URL 或者命名路由的情况[^1]。

#### 使用对象定义目的地
对于更复杂的场景，可以传递一个描述目的地址的对象给 `to` 属性:

<!-- 通过 path 定义 -->
<router-link :to="{ path: '/user/johnny' }">User Profile</router-link>

<!-- 通过 name 和参数定义 (推荐方式) -->
<router-link :to="{ name: 'UserProfile', params: { userId: johnny.id }}">Profile</router-link>

当采用带有名字的路由时，建议总是利用 `name` 字段配合动态参数来进行构建，这有助于提高代码可读性和维护性[^2]。

#### 添加查询字符串或哈希值
如果需要附加查询参数或者改变锚点位置，则可以在选项里加入相应的字段：

<!-- 包含 query 参数 -->
<router-link :to="{ path: '/search', query: { q: 'vuejs' }}">Search Results</router-link>

<!-- 设置 hash 锚点 -->
<router-link :to="{ path: '/', hash: '#section-2'}">Jump To Section Two</router-link>

这些功能使得开发者能够灵活控制最终生成的实际URL[^3]。

#### 在新标签页打开链接
有时希望点击链接后能在新的浏览器窗口加载对应的内容，这时可以通过设置 HTML 标准属性完成此操作：

<router-link :to="{ name: 'detail', params: { id: yourId }}" tag="a" target="_blank">Open New Page</router-link>

上述例子展示了如何让 `<router-link>` 行为像普通的 `<a>` 标签一样，在用户单击时于新标签页展示详情页面[^4]。