在使用 Vue.js 和 TypeScript 开发应用时，遇到错误信息“Property $router does not exist on type TS2339”是比较常见的问题。这种情况通常发生在 TypeScript 的类型系统中，尤其是在 Vue 3 中使用 Composition API 或在使用 Vue Router 时。接下来，我们将一起分析这个问题的成因以及解决方案。
问题分析
当我们在某个组件中尝试访问 $router 时，TypeScript 无法识别该属性。这个问题通常出现在以下几种情况下：
- 未正确安装 Vue Router：如果项目中没有安装 Vue Router，TypeScript 当然无法识别
$router。 - 类型定义缺失：如果 TypeScript 的类型定义文件没有正确引入，或者由于某些原因未识别
$router的类型。 - Composition API 的使用：在使用 Vue 3 的 Composition API 时，我们需要通过
useRouter钩子来获取 router 实例，而不是直接使用$router。
解决方案
-
确保安装 Vue Router： 确保项目中已经安装了 Vue Router，执行以下命令：
bash npm install vue-router -
引入类型定义： 为了让 TypeScript 识别
$router，我们需要在项目中引入 Vue Router 的类型定义。通常 Vue Router 会自带类型定义，但如果你发现问题依旧，可以手动引入：typescript // 在 src/shims-vue.d.ts 中添加 import 'vue-router'; -
使用 Composition API： 如果你的项目是基于 Vue 3 并使用了 Composition API，那么你应该使用
useRouter来获取 router 实例。以下是一个简单的示例：
```typescript
```
在上面的代码中，我们通过 useRouter 函数获取到了 router 实例，并且使用该实例的 push 方法进行页面导航。
- 配置 tsconfig.json：
确保你的
tsconfig.json文件中包含了 Vue 相关的配置。例如，确保compilerOptions中的types包含了vue和vue-router：json { "compilerOptions": { "types": ["vue", "vue-router"] } }
结论
“Property $router does not exist on type TS2339”这个错误通常和 TypeScript 的类型系统以及 Vue Router 的使用方式有关。在 Vue 3 和 Composition API 中，你应当使用 useRouter 钩子来获取 router 实例，确保项目中已正确安装 Vue Router 并引入其类型定义。解决这些问题后，你将能够顺利地访问 $router 及其方法，从而实现页面导航等功能。希望这个解答能帮助你更好地理解和解决该错误！
