使用Typescript和类组件装饰器时如何在Vue Router中传递props

Question

我试图在使用类组件装饰器时访问我的道具，但我不断返回“未定义”。 Vue Router 上的文档没有记录对使用 TS 的任何支持。下面是我当前的设置和 Codesanbox 的链接。

代码框：

https://codesandbox.io/s/vuetify-ts-router-forked-tsgsu

Router.ts：

import Vue from "vue";
import Router from "vue-router";
import CarsView from "./components/Cars.vue";
import OnboardCarset from "./components/Carsform.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    { path: "/", redirect: "/cars", component: CarsView },
    { path: "/cars", component: CarsView },
    {
      path: "/cars/:id",
      name: "car-edit",
      props: true,
      component: OnboardCarset
    }
  ]
});

Main.js：

import Vue from "vue";
import App from "./App";
import vuetify from "./vuetify";
import router from "./router";
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  router,
  vuetify,
  el: "#app",
  components: { App },
  template: "<App/>"
});

App.vue

<template>
  <v-app> <router-view></router-view></v-app>
</template>

<script>
export default {
  name: "App",
};
</script>

汽车.vue：

<template>
  <div>
    <router-link :to="{ name: 'car-edit', params: { id: tab } }">
      Cars
    </router-link>
    <router-view name="car-edit" :propsMessage="myArray" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Cars extends Vue {
  public tab: number = 2;
  public myArray: Array<string> = [];
  constructor() {
    super();
    this.myArray = ["One", "Two", "Three"];
  }
}
</script>

Carsform.vue

<template>
  <div>Cars Form</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class Carsform extends Vue {
  @Prop({ type: Array })
  propsMessage!: string[];
  constructor() {
    super();
    console.log(this.propsMessage);
  }
}
</script>

Answer 1

道具名称应与params字段相同：

<template>
  <div>Cars Form</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class Carsform extends Vue {
  @Prop({ type: Number })
  id!: number;
  constructor() {
    super();
    console.log(this.id);
  }
}
</script>