Vue-router: Property 'history' does not exist on type 'VueRouter'.

Created on 17 Apr 2018  路  5Comments  路  Source: vuejs/vue-router

Version

3.0.1

Reproduction link

n/a

Steps to reproduce

I'm having a similar issue as https://github.com/vuejs/vue-router/issues/1080. I just made a fresh new app with no type defs added, and I'm only using whatever ships with Vue.

This code,

        computed: {

            hash() {

                return this.$router.history.current.path

            }

        },

causes this error:

[tsl] ERROR in /home/trusktr/src/project/src/components/Header.vue.ts(101,47)
      TS2339: Property 'history' does not exist on type 'VueRouter'.

however when I log this.$router to the console, I do see a history property.

What is expected?

I should be able to access the history property, because I see it is there.

What is actually happening?

The type def doesn't let me

Most helpful comment

Regarding the same code,

        computed: {

            // TODO this might not update
            hash() {

                // using `any` here because Vue's typedef appears to be wrong about $router
                return ( this.$router as any ).history.current.path

            },

        },

I'm also getting the error

[tsl] ERROR in /home/trusktr/src/project/src/components/Header.vue.ts(94,27)
      TS2339: Property '$router' does not exist on type '{ hash(): any; }'.

Obviously, this is not going to refer to the computed object, but to the Vue instance. Does the typedef need adjusting?

All 5 comments

Regarding the same code,

        computed: {

            // TODO this might not update
            hash() {

                // using `any` here because Vue's typedef appears to be wrong about $router
                return ( this.$router as any ).history.current.path

            },

        },

I'm also getting the error

[tsl] ERROR in /home/trusktr/src/project/src/components/Header.vue.ts(94,27)
      TS2339: Property '$router' does not exist on type '{ hash(): any; }'.

Obviously, this is not going to refer to the computed object, but to the Vue instance. Does the typedef need adjusting?

I ended up needing a watch anyways, but nonetheless the following fix is required anyways:

        watch: {

            $route() {

                // using `any` here otherwise type defs don't allow it
                this.path = ( this as any ).$router.history.current.path

            },

        },

Is it possible to write a type def for that sort of use of this where it is looking at the implicit watch object rather than the Vue definition of a Vue instance?

history is private api, so it doesn't appear on the typings

I'm not sure what the right solution is for handling

history is private api, so it doesn't appear on the typings

In my case this issue was the last piece of code to get my app working in typescript. I got around the problem in my situation by adding // @ts-ignore to the line above where I was using router.history.

Likely not the best solution but it worked for getting me past the issue.

history is private api, so it doesn't appear on the typings

thanks

Was this page helpful?
0 / 5 - 0 ratings