如何解决Vue 3 + TypeScript项目中‘Ref＜boolean＞‘类型缺少‘value‘属性的问题 Property ‘value‘ does not exist on type ‘Re？

VUE在终端报错

ERROR in src/views/permission/detail.ts:54:42
TS2339: Property 'value' does not exist on type 'Ref<RouteLocationNormalizedLoadedGeneric, RouteLocationNormalizedLoadedGeneric>'.

    52 |                        state.busName = currentInstance.value.appContext.config.globalProperties.$moduleName + state.busName + '_permission';
    53 |                        console.log("busName: " + state.busName)
  > 54 |                        const id = String(router.currentRoute.value.query.id);
       |                                                              ^^^^^
    55 |                        detailTools.init(state, id, currentInstance.value);
    56 |                });

也有其他类似的报错

Property 'value' does not exist on type 'Ref<any, any>'

package.json 文件

{
  "name": "dahupt-web-base",
  "version": "0.1.1",
  "private": false,
  "scripts": {
    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@micro-zoe/micro-app": "^0.8.10",
    "ant-design-vue": "^4.1.2",
    "axios": "^1.2.0",
    "compression-webpack-plugin": "^5.0.1",
    "core-js": "^3.6.5",
    "dahupt-web": "^3.4.6",
    "file-saver": "^2.0.5",
    "json-editor-vue3": "^1.0.8",
    "loadjs": "^4.2.0",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-i18n": "^9.13.1",
    "vue-qr": "^4.0.9",
    "vue-router": "^4.0.0-0",
    "vuedraggable": "next",
    "vuex": "^4.0.0-0",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@types/file-saver": "^2.0.7",
    "@types/lodash-es": "^4.17.12",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli": "^5.0.8",
    "@vue/cli-plugin-babel": "~4.5.10",
    "@vue/cli-plugin-eslint": "~4.5.10",
    "@vue/cli-plugin-router": "~4.5.10",
    "@vue/cli-plugin-typescript": "~4.5.10",
    "@vue/cli-plugin-vuex": "~4.5.10",
    "@vue/cli-service": "~4.5.10",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.56.1",
    "sass-loader": "^8.0.2",
    "typescript": "^4.1.5",
    "vue-plugin-hiprint": "^0.0.56"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {
      "@typescript-eslint/no-inferrable-types": "off",
      "@typescript-eslint/no-var-requires": 0,
      "@typescript-eslint/no-explicit-any": [
        "off",
        "5"
      ]
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

tsconfig.json 文件

{
	"compilerOptions": {
		"target": "esnext",
		"module": "esnext",
		"strict": true,
		"jsx": "preserve",
		"importHelpers": true,
		"moduleResolution": "node",
		"experimentalDecorators": true,
		"skipLibCheck": true,
		"esModuleInterop": true,
		"allowJs": true,
		"allowSyntheticDefaultImports": true,
		"sourceMap": true,
		"baseUrl": ".",
		"noImplicitAny": false,
		"types": [
			"webpack-env",
			"@vue/runtime-core"  // 添加 Vue 3 类型支持
		],
		"paths": {
			"@/*": [
				"src/*"
			]
		},
		"lib": [
			"esnext",
			"dom",
			"dom.iterable",
			"scripthost"
		]
	},
	"include": [
		"src/**/*.ts",
		"src/**/*.tsx",
		"src/**/*.vue",
		"tests/**/*.ts",
		"tests/**/*.tsx",
		"modules/**/*.js"
	],
	"exclude": [
		"node_modules"
	]
}

解决方法

1.把package.json中的
"typescript": "~4.1.5"
改成了
"typescript": "^4.1.5"
然后删除node_modules，重新install就没有这个问题了

2.检查 TypeScript 插件和 Vue 插件

确保你安装了最新版本的 Vue 和 TypeScript 插件，特别是以下依赖：

• @vue/cli-plugin-typescript
• @vue/cli-service
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser

3.或者更新依赖 有时依赖版本不匹配或类型定义问题可能会导致错误。你可以尝试更新 vue-router、vue 和相关 TypeScript 依赖，确保它们是最新的兼容版本

npm install vue@latest vue-router@latest typescript@latest

你更新或更改任何依赖后，最好清除缓存并重新安装所有依赖

1. 删除 node_modules 和 package-lock.json;

   rm -rf node_modules package-lock.json

2. 清理 npm 缓存：

   npm cache clean --force

3. 重新安装依赖：

   npm install

   希望能帮助到大家 制作不易 请大家点个赞