javascript - 如何在 Vue.js - Nuxt - TypeScript 应用程序中访问路由参数？

Question

我正在构建一个基于 Nuxt TypeScript Starter 的网站模板。我在我的页面文件夹中创建了一个动态路由的页面 _id.vue，我想在我的 TS 类中访问该 id 属性。我可以通过编写 {{$route.params.id}} 在我的模板中访问它，但是当我尝试在类中引用 $route 时，我得到一个错误:

error TS2304: Cannot find name '$route'.

Answer 1

作为一个简单的解决方案，尝试从 vue-router 导入路由，如下所示:

<script lang="ts">
import Component from "vue-class-component"
import { Route } from "vue-router"

@Component({})
export default class RoutingExample extends Vue {
    created() {
        console.log(this.$route) // this should not throw TS errors now
    }
        
}
</script>

我认为其他解决方案需要您 augment the Vue module ，类似于你会发现的东西 here in the Vue docs .

更多 Vue + TypeScript 示例可以在这个 repo 中找到:https://github.com/jsonberry/vue-typescript-examples