vue router 怎么传递俩个参数

Vue Router 用于在 Vue.js 应用程序中管理路由，你可以通过不同的方式进行参数传递，特别是当你需要传递两个参数时。通常，有两种常见的方式：

1. **查询字符串**（Query Parameters）：
- 使用动态路由（Dynamic Segments）：例如，`/users/:userId/books/:bookId`。在这种模式下，`:userId` 和 `:bookId` 就会被视为动态参数，在浏览器地址栏中显示为 `/?userId=123&bookId=456`。
- 在路由对象中使用 `query` 对象：如 `{ name: 'bookDetail', path: '/detail/:id', query: { userId: '123', bookId: '456' } }`。

2. **路径片段参数**（Path Parameters）：
- 直接在路径中使用冒号前缀，如 `/users/John_Doe/books/JavaScript_Book?userId=123&bookId=456`，然后在对应的组件里通过 `$route.params` 获取这两个值。

在组件内部，你可以通过 `this.$route.query` 或 `this.$route.params` 来访问这些参数。记得在组件的生命周期钩子（如 `beforeRouteEnter` 或者 `mounted`）中获取它们。

// 示例代码
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.userId = to.query.userId;
      vm.bookId = to.params.bookId; // 如果是路径片段参数
    });
  },
  data() {
    return {
      userId: '',
      bookId: ''
    };
  }
};