vuejs typescript 属性路由器不存在

Question

我尝试在我的打字稿类组件中访问路由器：

import {Vue} from 'vue-property-decorator'
import Component from 'nuxt-class-component'
import {Getter, Action} from 'vuex-class'

@Component
export default class Login extends Vue {
    @Action login

    username = ''
    password = ''

    async submit () {
        await this.login({username: this.username, password: this.password})
        this.$router.push('/results')
    }
}

不幸的是，我得到：

error TS2339: Property '$router' does not exist on type 'Login'.

Answer 1

对于使用 Vue 3 的用户，不要忘记使用 声明你的组件defineComponent，否则 TypeScript 将无法推断类型：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  // type inference enabled
})
</script>

参考： https: //v3.vuejs.org/guide/typescript-support.html#defining-vue-components

Answer 2

填充 vue 文件并包含$router：

制作一个typings名为vue-shim.d.ts

像这样调整你的垫片：

import VueRouter, { Route } from 'vue-router'

declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter
  }
}

现在Vue（在你的情况下——这个）将有一个属性，$router打字稿不会抱怨。

Answer 3

确保您已在主 vue 文件中导入路由器：

import router from './router'

const v = new Vue({
  router,

  render: h => h(App)
}).$mount('#app')

这就是我编写组件的方式，但我认为是一样的。

  import Vue from 'vue'

  export default Vue.extend({
    name: 'Login'

  })