你如何在 Typescript 中使用命名路由器视图？答案

【问题标题】：How do you use named router-views with Typescript?你如何在 Typescript 中使用命名路由器视图？
【发布时间】：2020-04-01 12:49:23
【问题描述】：

如何在 Typescript 中使用命名路由器视图？我根据文档设置了我的路由器 index.ts：

<component>
  <v-content style="padding: 0 0 0 180px">
     <router-view name="settings"/>
  </v-content>
</component>

const routes = [
  {
    path: '/Members',
    name: 'Members',
    component: { settings: Members}
  },
]

但是当我尝试运行时，我得到了这个错误：

Argument of type '{ mode: "history"; base: string | undefined; routes: ({ path: string; name: string; component: { settings: typeof Members; }; 
} | { path: string; name: string; component: typeof Home; })[]; }' is not assignable to parameter of type 'RouterOptions'.
  Types of property 'routes' are incompatible.
    Type '({ path: string; name: string; component: { settings: typeof MyAccount; }; } | { path: string; name: string; component: typeof Home; })[]' i
s not assignable to type 'RouteConfig[]'.
      Type '{ path: string; name: string; component: { settings: typeof MyAccount; }; } | { path: string; name: string; component: typeof Home; }' is 
not assignable to type 'RouteConfig'.
        Type '{ path: string; name: string; component: { settings: typeof Members; }; }' is not assignable to type 'RouteConfig'.
          Types of property 'component' are incompatible.
            Type '{ settings: typeof Members; }' is not assignable to type 'VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<...>, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...> | undefined'.
              Type '{ settings: typeof Members; }' is not assignable to type 'AsyncComponentFactory<DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>>'.
                Type '{ settings: typeof MyAccount; }' provides no match for the signature '(): { component: AsyncComponentPromise<DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>>; loading?: VueConstructor<...> | ... 3 more ... | undefined; error?: VueConstructor<...> | ... 3 more ... | undefined; delay?: number | undefined; timeout?: number | undefined; }'.

【问题讨论】：

标签： typescript vue.js

【解决方案1】：

我终于弄明白了……我不得不查看 router.d.ts 文件，看看他们在寻找什么类型。如果你想使用命名路由器视图，你必须在代码中添加一个 s 到组件，因为文件会检查这种格式：

components?: Dictionary<Component>

type Dictionary<T> = {
    [key: string]: T;
}

【讨论】：