Property '$router' does not exist on type

vue+typescript中,方法里调用this.$router 报错
Property '$router' does not exist on type 'Close'

请问如何解决?

close.vue

<template>
  <div class="close-wrap"
       :class="{'header-close': closeType === 'header'}"
       @click="back">
    <i class="close icon iconfont icon-xiangzuo1"></i>
  </div>
</template>
<script lang="ts">
import {Vue, Component, Prop, Inject} from 'vue-property-decorator'

@Component({})
export default class Close extends Vue {
  // props
  @Prop({default: ''})
  closeType: 'icon'

  // methods
  back(): void{
    console.log(this); // 打印出是Close实例,其上能找到$router属性
    // 这里报错:Property '$router' does not exist on type 'Close'
    this.$router.go(-1);  
  }
}
</script>

// 打印出是Close实例,其上能找到$router属性,并通过原型链往上找也能找到go()
clipboard.png

阅读 34.9k
10 个回答

我没用ts写过,其他社区找到个答案
使用了这种方式this['router']


文档里其实有说明的,需要对类型进行补充

vue-shim.d.ts文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import {Route} from 'vue-router'
declare module "*.vue" {
  import Vue from "vue"
  export default Vue
}
// 扩充
declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter,
    $route: Route
  }
}

这个时候已经能正确编译了,但是编辑器可能还有红色报错,这个应该的改编辑器的设置(这我不太确定)?

在其它类(组件)打印this也没有对应配置的$router、和$axios, 使用没问题,但是编译器报错(下划红波浪线)。。。无法解决。。真难用。

clipboard.png

clipboard.png

新手上路,请多包涵

用一个变量接收 router 在访问 变量里的options 就行了

clipboard.png
我尝试网上搜到的this.$router['option']和this['router']以及interface的方法都还是会红线,借用$ref保红线的解决方法套用,解决了

新手上路,请多包涵

导出的时候使用 Vue.extend()创建并导出子类

export default Vue.extend({
    data(){
        return{
            ...
        }
    },
    methods: {
        ...
    }
})

image.png看起来应该是Vetur插件的问题,实际eslint是没问题的。

Property 'isError' does not exist on type '

发现typescript 项目只要是使用了this. 的写法都会报红警告,参考网上的写法this[''] 写法可以解决此问题,但是项目里太多this.写法,改起来太多了。而且以后都要写成this[] 。

比对资料发现,在tsconfig.json 里面配置"noImplicitThis": false 可以解决this. 使用问题。

1

//var VueRouter = require ('vue-router')
import Router from 'vue-router'
//Vue.use (VueRouter)
Vue.use(Router)
是否use 

2 这个this.指向什么 俩个方向排查

clipboard.png
没什么问题啊,会不会是你的this指向到了你的

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏