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

Question

我正在建立一个基于Nuxt TypeScript Starter模板的网站。我已经在页面文件夹中创建了动态路由的页面_id.vue，并且希望可以访问TS类中的id属性。我可以通过写在模板中访问它，{{$route.params.id}}但是当我尝试$route在类内部引用时，出现错误：

错误TS2304：找不到名称'$ 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>

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

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