H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

回答:

我没用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: {
        ...
    }
})

回答:

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

本文地址:H5W3 » Property '$router' does not exist on type

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址