Vue中怎么使用router进行页面传参

在响应式编程中，使用 Vue Router 传递参数通常涉及到以下几个方面：

1. 动态路由匹配

动态路由匹配允许你根据 URL 中的参数来渲染不同的组件。这在显示用户信息、博客文章等需要根据 ID 或其他标识符来区分内容的情况下非常有用。
例如，如果你想根据用户 ID 显示不同的用户信息页面，你可以定义一个动态路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      component: UserProfile
    }
  ]
});

在这个例子中，:userId 是一个动态片段，可以在 UserProfile 组件中通过 this.$route.params.userId 来访问。

2. 查询参数（Query Params）

查询参数（也称为查询字符串参数）是在 URL 之后附加的键值对，它们不会影响路由，但可以传递额外的信息。
例如，你可以使用查询参数来传递筛选条件：

// URL: /users?search=John
const router = new VueRouter({
  routes: [
    {
      path: '/users',
      component: UserList
    }
  ]
});

在 UserList 组件中，你可以这样获取查询参数：

export default {
  mounted() {
    console.log(this.$route.query.search); // 输出 URL 中的 search 查询参数的值
  }
};

3. 编程式导航

编程式导航是 Vue Router 提供的 API，允许你通过 JavaScript 代码来导航，而无需使用 <router-link>。
例如，使用 $router.push 方法添加路由参数：

this.$router.push({
  path: '/user/' + userId,
  query: { search: 'someSearchTerm' }
});

4. 在 <router-link> 中传递参数

你还可以在 <router-link> 组件中直接传递参数：

<router-link :to="{ path: '/user/' + userId }">User Profile</router-link>
<router-link :to="{ path: '/users', query: { search: 'someSearchTerm' } }">Search Users</router-link>

在 Vue 3 中，使用 Vue Router 传递参数是非常直观和灵活的。你可以根据需要选择使用路由参数或查询参数，以及使用编程式导航或 <router-link> 来更新应用的 URL。