javascript Vue Router $route在Vue 3、TypeScript和Webpack Encore中编译时不存在

oiopk7p5  于 2023-06-04  发布在  Java
关注(0)|答案(1)|浏览(145)

我一直在尝试在我的shims.vue.d.ts文件中设置vue-router $route,以允许$route不会在this范围内抛出错误。this.$route.params.paymentId不断返回类型错误TS2339: Property '$route' does not exist on type 'void'
我用的是<script setup lang="ts">。在其他已定义的组件(https://vuejs.org/guide/typescript/overview.html#definecomponent)中,它引用并构建得很好。我只是似乎无法弄清楚如何让它与Vue 3 <script setup lang="ts">一起工作。
下面是我目前的shims.vue.d.ts和结构后,试图定义在许多方面。我已在webpack.config.js中启用.enableTypeScriptLoader()

// myComponent.vue

<script setup lang="ts">
import { computed, onMounted } from "vue";

const paymentId = this.$route.params.paymentId;

</script>
declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const ComponentOptions: ComponentOptions
    export default ComponentOptions
}

declare module 'vue/types/vue' {
    import type {Router, RouteLocationNormalized } from "vue-router";

    interface Vue {
        $router: Router,
        $route: RouteLocationNormalized
    }
}
// tsconfig.json

{
  "compilerOptions": {
    "declaration": true,
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es5",
    "skipLibCheck": true,
    "sourceMap": true,
    "declarationMap": true,
    "strict": true
  },
  "exclude": [
    "./node_modules"
  ],
  "include": ["**/*.ts","/**/*.tx","**/*.vue"]
}
juzqafwq

juzqafwq1#

我忘了this不再是Composition API的一部分了。更新脚本设置后,所有工作正常。

import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

相关问题