vu e2 路由传值

### Vue 2 中通过路由传递参数

在 Vue 2 应用程序中，可以通过多种方式利用 `vue-router` 来传递参数给不同的页面或组件。一种常见的方式是在路径中定义动态段，这些动态段可以作为参数被捕获并用于渲染特定的内容。

#### 使用动态路由匹配

当配置路由时，在路径字符串中加入冒号前缀的占位符来表示该位置是一个可变的部分：

const routes = [
  {
    path: '/author/:id',
    component: Author,
  },
];

在这个例子中，`:id` 是一个动态片段，它允许任何值（除了斜杠）被放置在此处，并且这个值会被捕获为 `$route.params.id`[^1]。

对于上述提到的 `Author` 组件模板而言，其能够展示传入的具体作者信息如下所示：

<div>
  Author: {{ $route.params.author }}
</div>
<router-view></router-view>

这里不仅展示了当前 URL 路径中的 `author` 参数，还嵌套了另一个 `<router-view>` 实例以便进一步加载子级视图内容。

#### 导航至带参链接

为了导航到带有参数的目标路由，既可以采用编程式的导航也可以借助 HTML 锚点标签配合 `v-bind` 或者直接书写完整的相对/绝对路径形式：

- **编程式导航**

  this.$router.push({ name: 'user', params: { userId: 123 }})

- **声明式导航 (HTML)**

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

这两种方法都可以确保目标路由接收到预期的数据，从而正确显示所需的信息[^2]。