Vue-router: Interface RouteConfig is not exported anymore

Created on 16 Jun 2020  路  5Comments  路  Source: vuejs/vue-router

Version

3.3.3

Reproduction link

Please see Steps to reproduce below

Steps to reproduce

import { RouteConfig } from 'vue-router';
import RouteMetaInformation from './RouteMetaInformation';

/**
 * RouteConfig using RouteMetaInformation.
 */
export default interface RouteMetaConfig extends RouteConfig {
  meta?: RouteMetaInformation;
  children?: RouteMetaConfig[];
}

What is expected?

RouterConfig / RouterConfigBase should be exported so consumer can extends from it

https://github.com/vuejs/vue-router/blob/v3.3.2/types/router.d.ts#L92

What is actually happening?

_RouterConfigBase is not exported anymore

https://github.com/vuejs/vue-router/blob/v3.3.3/types/router.d.ts#L92

Typescript

Most helpful comment

I think this could be helpful

So I can maybe do something like this:

export default interface RouteMetaConfigSingleView extends RouteConfigSingleView {
  meta?: RouteMetaInformation;
}

export default interface RouteMetaConfigMultipleViews extends RouteConfigMultipleViews {
  meta?: RouteMetaInformation;
  children?: RouteMetaConfig[];
}

export type RouteMetaConfig = RouteMetaConfigSingleView | RouteMetaConfigMultipleViews;

But maybe my problem is related to #3183
And therefore it could be helpful to have

interface _RouteConfigBase<Meta = any> {
  path: string
  name?: string
  redirect?: RedirectOption
  alias?: string | string[]
  meta?: Meta
  beforeEnter?: NavigationGuard
  caseSensitive?: boolean
  pathToRegexpOptions?: PathToRegexpOptions
}

export interface RouteConfigSingleView<Meta = any> extends _RouteConfigBase<Meta> {
  component?: Component
  props?: boolean | Object | RoutePropsFunction
}

export interface RouteConfigMultipleViews<Meta = any> extends _RouteConfigBase<Meta> {
  components?: Dictionary<Component>
  children?: RouteConfig[]
  props?: Dictionary<boolean | Object | RoutePropsFunction>
}

export type RouteConfig<Meta = any> = RouteConfigSingleView<Meta> | RouteConfigMultipleViews<Meta>

Problem with that: each meta would have applied the same interface. But maybe this is not a big problem when using optional properties.

e.g.

{ hideInNavi?: boolean, breadcrumb?: string }

All 5 comments

_RouteConfigBase is private but we can expose the two interface for multiple and single views: https://github.com/vuejs/vue-router/blob/v3.3.3/types/router.d.ts#L103-L112

I think this could be helpful

So I can maybe do something like this:

export default interface RouteMetaConfigSingleView extends RouteConfigSingleView {
  meta?: RouteMetaInformation;
}

export default interface RouteMetaConfigMultipleViews extends RouteConfigMultipleViews {
  meta?: RouteMetaInformation;
  children?: RouteMetaConfig[];
}

export type RouteMetaConfig = RouteMetaConfigSingleView | RouteMetaConfigMultipleViews;

But maybe my problem is related to #3183
And therefore it could be helpful to have

interface _RouteConfigBase<Meta = any> {
  path: string
  name?: string
  redirect?: RedirectOption
  alias?: string | string[]
  meta?: Meta
  beforeEnter?: NavigationGuard
  caseSensitive?: boolean
  pathToRegexpOptions?: PathToRegexpOptions
}

export interface RouteConfigSingleView<Meta = any> extends _RouteConfigBase<Meta> {
  component?: Component
  props?: boolean | Object | RoutePropsFunction
}

export interface RouteConfigMultipleViews<Meta = any> extends _RouteConfigBase<Meta> {
  components?: Dictionary<Component>
  children?: RouteConfig[]
  props?: Dictionary<boolean | Object | RoutePropsFunction>
}

export type RouteConfig<Meta = any> = RouteConfigSingleView<Meta> | RouteConfigMultipleViews<Meta>

Problem with that: each meta would have applied the same interface. But maybe this is not a big problem when using optional properties.

e.g.

{ hideInNavi?: boolean, breadcrumb?: string }

Adding a generic to the type should go through an RFC because is not that simple of a change. If anybody is interested in leading that, please do at https://github.com/vuejs/rfcs. As noted, take into account what has been said at https://github.com/vuejs/vue-router/issues/3183

https://github.com/vuejs/vue-router/issues/3183#issuecomment-621676818 This idea could resolve my problem

Cause nothing has changed until now, I have rewritten my code as following:

import { RouteConfigMultipleViews, RouteConfigSingleView } from 'vue-router/types/router';
import RouteMetaInformation from './RouteMetaInformation';

export interface RouteMetaConfigSingleView extends RouteConfigSingleView {
  meta?: RouteMetaInformation;
  children?: RouteMetaConfig[];
}

export interface RouteMetaConfigMultipleViews extends RouteConfigMultipleViews {
  meta?: RouteMetaInformation;
  children?: RouteMetaConfig[];
}

/**
 * RouteConfig using RouteMetaInformation.
 */
export type RouteMetaConfig = RouteMetaConfigSingleView | RouteMetaConfigMultipleViews;

You can close this issue if you want

Was this page helpful?
0 / 5 - 0 ratings