vuejs typescript属性路由器不存在答案

【问题标题】：vuejs typescript property router does not existvuejs typescript属性路由器不存在
【发布时间】：2018-02-17 04:25:54
【问题描述】：

我尝试在我的 typescript 类组件中访问路由器：

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'.

【问题讨论】：

$router 在声明文件中可能是私有的，试试 (this.$router).push('/results')。如果这有效，那么声明文件是错误的。嗯，你也试过“super.$router”吗？它可能受到保护
显然都不起作用。但是这个['router'] 有效。
你可以试试这个（this as any）。$router.push()

标签： typescript vue.js

【解决方案1】：

填充 vue 文件并包含 $router:

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

像这样调整你的垫片：

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

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

现在Vue（在您的情况下--this）将具有$router 的属性，并且打字稿不会抱怨。

【讨论】：

【解决方案2】：

其他答案对我不起作用

但下面的代码有效

import Vue from 'vue';

import VueRouter from 'vue-router';

...
  public rowClick(row: object, column: object, event: object): void {
      console.log(row, column, event);
      this.$router.push('/login');
  }
...

【讨论】：

【解决方案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'

  })

【讨论】：

第二个代码块解决了这个问题。最初的问题是因为 TS 不知道导出的对象正在 vue 中使用。

【解决方案4】：

使用 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

【讨论】：