如何以字符串形式访问动态路由参数？

Question

我在我的项目中有一条路线设置为

  {
    path: '/change/:who',
    component: () => import('layouts/ChangeValue.vue'),
  },

在 ChangeValue 组件中，通过路由 http://localhost:8080/#/change/michael，我尝试访问 :who 参数（应该是 michael）：

  setup() {
    let user = ref<string>('');
    let route = useRoute();
    user.value = route.params.who;
(...)

这会在编译时引发错误：

index.js?a29e:529 [webpack-dev-server] TS2322: Type 'string | string[]' is not assignable to type 'string'.
  Type 'string[]' is not assignable to type 'string'.
    19 |     let user = ref<string>('');
    20 |     let route = useRoute();
  > 21 |     user.value = route.params.who;
       |     ^^^^^^^^^^
    22 |
    23 |
    24 |     interface CorveesDescI {

我的主要问题是我不明白为什么 route.params.who 的类型应该是 string[] 而不是简单的 string.

现在，我尝试取 route.params.who 的第一个元素，它是字母 m（michael 的第一个字母，或者 a[0] 如果 a = michael).

所以我有

意外的类型 string[] 当我期望 string
并且这个 string[] 的第一个元素实际上是预期字符串的第一个字母

注意：框架是Quasar，但我认为它不相关

Answer 1

问题是很难为路由参数创建类型描述。

路由动态 params 可以使用自定义正则表达式定义，它允许匹配单个以及 repeatable params。动态输入（针对您的特定路由定义）是不可能的。这就是为什么路由 params 类型被声明为 Record<string, string | string[]>

要解决您的问题，只需使用 type casting:

user.value = route.params.who as string

如何以字符串形式访问动态路由参数？

How to access dynamic route parameters as strings?

typescript

vue.js

vue-router

vuejs3