vuejs typescript属性路由器不存在

时间:2017-09-08 09:30:00

标签: typescript vue.js

我尝试访问我的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'.

4 个答案:

答案 0 :(得分:2)

确保在主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'

  })

答案 1 :(得分:2)

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

答案 2 :(得分:0)

填充vue文件并包含$router

制作一个名为typings的{​​{1}}文件

像这样调整垫片:

vue-shim.d.ts

现在import VueRouter, { Route } from 'vue-router' declare module 'vue/types/vue' { interface Vue { $router: VueRouter } } (在您的情况下-此)将具有Vue的属性,打字稿将不会抱怨。

答案 3 :(得分:0)

其他答案对我不起作用

但是下面的代码有效

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');
  }
...