Ts中的枚举和元组怎么使用？Vue的路由如何携带参数？多个参数如何携带？动态路由是如何解析的？

1. Ts中的枚举和元组使用

枚举：枚举是一种包含一组命名的常量的数据结构，枚举中的每个元素都有一个名称和一个对应的值。例如，定义一种颜色枚举：

enum Color {
  Red = 1,
  Green,
  Blue
}
let colorName: string = Color[2];
console.log(colorName); // 输出 'Green'

元组：元组是一种数组类型，它指定了数组中每个元素的类型。元组中的每个元素可以是不同类型的。例如，定义一个字符串和一个数字的元组：

let x: [string, number];
x = ['hello', 10]; // 初始化
console.log(x[0].substring(1)); // 输出 'ello'
console.log(x[1].toFixed(2)); // 输出 '10.00'

2. Vue的路由传参

路由传参可以用`params`或`query`，`params`传参会将参数拼接在URL上，而`query`则会将参数以查询参数的方式附加在URL上。

例如，在路由配置中定义一个带参数的路由：

{
  path: '/user/:id', // 动态路由
  component: User,
  props: true // 将params参数注入到User组件的props中
}

在代码中使用`router-link`传递参数：

<router-link :to="{ path: '/user/' + userId }">User</router-link>

或者：

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

在`User`组件中通过props接收参数：

export default {
  props: ['id'],
  created() {
    console.log(this.id);
  }
}

多个参数的话，可以使用对象的方式传递参数：

<router-link :to="{ path: '/user', query: { id: userId, name: userName } }">User</router-link>

在`User`组件中通过`$route.query`获取参数：

export default {
  created() {
    console.log(this.$route.query.id);
    console.log(this.$route.query.name);
  }
}

3. Vue动态路由解析

Vue的动态路由是指路由路径中包含参数的路由。例如，上面提到的带参数的路由`/user/:id`就是动态路由。

当访问这个路由时，Vue会将参数解析到`$route.params`中。例如，访问`/user/123`，则`$route.params.id`为`123`。

在路由配置中，只需要将`props`设置为`true`，Vue就会自动将路由参数注入到组件的props中，例如：

{
  path: '/user/:id',
  component: User,
  props: true
}

在`User`组件中，可以直接使用`props`来获取参数：

export default {
  props: ['id'],
  created() {
    console.log(this.id);
  }
}