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

Question

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

错误 TS2304：找不到名称“$route”。

原文由 Andrew Bogdanov 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

我认为其他解决方案需要您 扩充 Vue 模块，类似于您 在 Vue 文档中 找到的内容。

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

原文由 Jason Awbrey 发布，翻译遵循 CC BY-SA 4.0 许可协议