web-dev-qa-db-ja.com

Vue.js-Nuxt-TypeScriptアプリケーションのルーティングパラメーターにアクセスする方法

Nuxt TypeScript Starter テンプレートに基づいたWebサイトを構築しています。ページフォルダー内に動的にルーティングされるページ_id.vueを作成しました。TSクラス内でそのidプロパティにアクセスしたいです。テンプレートで{{$route.params.id}}と書くことでアクセスできますが、クラス内で$routeを参照しようとするとエラーが発生します。

エラーTS2304：名前 '$ route'が見つかりません。

javascripttypescriptvue.jsnuxt.js
7
Andrew Bogdanov

簡単な解決策として、次のように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 docs 。

詳細Vue + TypeScriptの例は、このリポジトリにあります： https://github.com/jsonberry/vue-TypeScript-examples

2
Jason Awbrey

現在のページURLまたはparamを見つけるためのnuxtjsプロジェクトの適切なソリューション

{{ $nuxt.$route.name }}
1
ozo

Fetch関数を介してroute.paramsにアクセスし、デフォルトでこの関数に渡されるコンテキストオブジェクトからparamsを取得できました。

<script lang="ts">
import Component from "nuxt-class-component"
@Component({})
export default class RoutingExample extends Vue {
    fetch ({ store, params }) {
       console.log("params:", params.id);
       ...
    }
}
</script>

ただし、作成またはマウントされた他のフックではなく、そのフェッチフックでのみparamsを使用できることに注意してください。ジェイソンの答えも有効です

0
Andrew Bogdanov