Vue-router: is not assignable to type 'RouterOptions' because of computed property on component

[carltierney]

So I have two components, one works with computed properties the other one does not. If I remove computed from the component vue-router will compile without an error.

Otherwise it throws the following error:
TS2345: Argument of type '{ routes: ({ name: string; path: string; components: { default: { name: string; props: string[]; ...' is not assignable to parameter of type 'RouterOptions | undefined'.
Type '{ routes: ({ name: string; path: string; components: { default: { name: string; props: string[]; ...' is not assignable to type 'RouterOptions'.
Types of property 'routes' are incompatible.
Type '({ name: string; path: string; components: { default: { name: string; props: string[]; methods: {...' is not assignable to type 'RouteConfig[] | undefined'.
Type '({ name: string; path: string; components: { default: { name: string; props: string[]; methods: {...' is not assignable to type 'RouteConfig[]'.
Type '{ name: string; path: string; components: { default: { name: string; props: string[]; methods: { ...' is not assignable to type 'RouteConfig'.
Type '{ name: string; path: string; components: { default: { name: string; props: string[]; methods: { ...' is not assignable to type 'RouteConfig'.
Types of property 'components' are incompatible.
Type '{ default: { name: string; props: string[]; methods: { [x: string]: ActionMethod | MutationMethod...' is not assignable to type 'Dictionary | undefined'.
Type '{ default: { name: string; props: string[]; methods: { [x: string]: ActionMethod | MutationMethod...' is not assignable to type 'Dictionary'.
Property 'default' is incompatible with index signature.
Type '{ name: string; props: string[]; methods: { [x: string]: ActionMethod | MutationMethod | Computed...' is not assignable to type 'Component'.
Type '{ name: string; props: string[]; methods: { [x: string]: ActionMethod | MutationMethod | Computed...' is not assignable to type 'AsyncComponent, DefaultMethods, DefaultComputed, Record>'.
Type '{ name: string; props: string[]; methods: { [x: string]: ActionMethod | MutationMethod | Computed...' provides no match for the signature '(resolve: (component: Component, DefaultMethods, DefaultComputed, Record>) => void, reject: (reason?: any) => void): void | Promise | FunctionalComponentOptions, PropsDefinition>> | ComponentOptions, DefaultMethods, DefaultComputed, Record, Record> | EsModuleComponent>'.

**Router Code:

import designationSearchComponent from './modules/designation/designationSearch.vue';
import designationDetailComponent from './modules/designation/designationdetailcomponent.vue';
import givebuttonComponent from './modules/giving/givebutton.vue';


export const routes = [

    { name: 'fundabledetail', path: '/designationdetail/:id', components: { default: designationDetailComponent, givebutton: givebuttonComponent }, props: { default: true, givebutton: false } },
    { name: 'searchandbrowse', path: '/searchandbrowse', components: { default: designationSearchComponent, givebutton: givebuttonComponent } },

]

Component Code: DesignationDetailComponent.vue

<template>
    <div id="myApplication">
        <div v-if="loading===false">
            <h1>Designation Detail Preview for {{id}}</h1>

            <p></p>
        </div>


    </div>
</template>

<script lang="ts">


    import { mapActions, mapGetters, mapMutations, mapState } from 'Vuex';
    import { FundableDetail } from '../api/api';
    import { IPage } from '../api/parents.ts';
    import givebutton from '../giving/givebutton.vue';
    import store from '../store/store';

    export default {

        name: 'designation-detail',
        props: ['id'],
        methods: {
            ...mapActions({
                getServerDetail: 'designationDetail/getDesignation'
            }),
            ...mapMutations({ setId: 'designationDetail/setId' }),
            ...mapState({
                designation: state => store.state.designationDetail.designation,
                designationId: state => store.state.designationDetail.id
            }),
            ...mapGetters({
                getData: 'designationDetail/designation'
            })
        },
        computed: {

        },
        data: function() {
            return {
                photoUrl: '__PHOTOURL__',
                loading: false

            };
        },
        created() {
            //this['setId'](this['id']);
            //this['loading'] = true
            //this['getServerDetail']().then(() => {
            //    console.log('this', this);
            //    this['loading'] = false;
            //})
        }


};

</script>

<style>
    #app {
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
</style>

```

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

[carltierney]

Additional information, so I have narrowed it down to the following, if I have more than one route, it doesn't matter the order, I get the same error. I refactored it to make the views fairly stupid and moved the components out of the views so I could test the components separately from the router.

export const routes = [
    { name: 'designationSearch', path: '/designationsearch/:id', component: designationSearchView, props: true },
    { name: 'designationDetail', path: '/designationdetail/:id', component: designationDetailView, props: true}
]

commenting out either line will result in a successful build, uncommenting either line will not. If I remove the router all together and include the components in the main app view it also compiles successfully. If I remove the computed property from any one of the two components it will also compile without the above error.

[carltierney]

actually solved the problem, its related to typescript and the fact that the router should be constructed in a strongly typed fashion. You should add this to the documentation so someone else doesn't have the same issue.

Using the types to construct the route options makes all the difference.

import { RouterOptions, RouteConfig } from 'vue-router';

import designationSearchView from './views/designationsearchview.vue';
import designationDetailView from './views/designationdetailview.vue';


const navRoutes = <Array<RouteConfig>>[
    { name: 'designationSearch', path: '/designationsearch/:id', component: designationSearchView, props: true },
    { name: 'designationDetail', path: '/designationdetail/:id', component: designationDetailView, props: true}
]

export const routerOptions = <RouterOptions>{
    routes: navRoutes

}

[hiumar]

(alias) class ListEmployeeComponent
import ListEmployeeComponent
Type '{ path: string; Component: typeof ListEmployeeComponent; }' is not assignable to type 'Route'

my code is

const approutes:Routes=[
{path : '/list', Component: ListEmployeeComponent},
{path : 'create', Component : CreateEmployeeComponent},
{path : '', redirectTo :'/list',pathMatch:'full' }
];