Vue+TS项目提示Property '$router' does not exist on type 'App'求助

解决步骤 #

1. 先排查基础依赖问题

如果是Vue2项目，首先安装对应版本的Vue类型声明包：

npm i @types/vue@2 -D

如果是Vue3项目，Vue本身自带TS类型，无需额外安装类型包，若仍报错可重新安装Vue依赖修复损坏的文件：

npm i vue@latest -S

2. 修正类型扩充写法

你之前把Vue接口的扩充写在了*.vue模块声明内部，属于错误写法，会破坏原有模块的类型识别：

• 先把shims-vue.d.ts还原为默认内容：

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

• 新建src/types/vue.d.ts类型声明文件，写入标准的Vue原型扩充内容：

import Vue from 'vue'
import VueRouter from 'vue-router'

// Vue2 类型扩充写法
declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter
    $route: VueRouter['currentRoute']
  }
}

// 如果是Vue3项目，用下面的写法
// declare module '@vue/runtime-core' {
//   interface ComponentCustomProperties {
//     $router: VueRouter
//     $route: VueRouter['currentRoute']
//   }
// }

3. 验证tsconfig配置

确认项目根目录的tsconfig.json的include字段包含了你新增的类型文件，示例配置：

{
  "include": [
    "src/**/*",
    "src/**/*.d.ts"
  ]
}

4. 重启TS语言服务

修改完类型文件后，在编辑器中按快捷键Ctrl+Shift+P，选择「TypeScript: Restart TS Server」重启TS服务，即可生效。

如果你用的是Vue3的组合式API，更推荐直接用useRouter钩子获取路由实例，无需扩充原型，天然带类型提示：

import { useRouter } from 'vue-router'
const router = useRouter()
// 直接调用router.push即可

内容的提问来源于stack exchange，提问作者mikeym