在vue里params怎么使用

在Vue.js中，`params`通常用于组件间的通信，特别是在路由系统中传递数据。当你通过URL动态地将数据作为参数传递给某个组件时，可以这样做：

1. **路径参数（Route Parameters）**:
在创建路由时，可以在路径字符串后面添加大括号 `{}`，比如 `'/users/:userId'`，这里的 `:userId` 就是一个动态参数。在组件内部，你可以使用 `this.$route.params.userId` 来访问这个参数。

// router.js
{
  path: '/users/:userId',
  component: UserDetailComponent,
}

// UserDetailComponent.vue
export default {
  computed: {
    userId() {
      return this.$route.params.userId;
    }
  },
}

2. **查询参数（Query Parameters）**:
如果需要传递额外的数据而不想改变URL，可以使用问号 `?` 后面的一对键值对，如 `'/search?q=keyword'`。访问这些参数在Vue Router中是通过 `$router.query` 对象，例如 `this.$router.query.q`。

// ParentComponent.vue (导航到详情页并传参)
this.$router.push({
  name: 'detail',
  query: { id: 1, title: '用户详情' },
});

// DetailComponent.vue (接收并显示参数)
created() {
  console.log(this.$route.query.id); // 输出 "1"
}