web-dev-qa-db-ja.com

nuxt.js next-linkにデータを設定する方法は？

データをnuxt-linkに渡そうとしていますが、リンクをクリックするとnuxt-linkが404エラーを返します。ファイルの取得と読み込みが行われていないようです。

：hrefとハードコーディングを使用する2番目の2つのリンクは機能します

<h2 class="subtitle"><nuxt-link :to="{path: filePath}" exact>Nuxt View Menu</nuxt-link></h2>
<h2 class="subtitle"><a :href="filePath">Vue View Menu</a></h2>
<h2 class="subtitle"><a href="files/officialMenu.pdf">HardCode View Menu</a></h2>

<script>
export default {
  layout: 'default',
  data () {
    return {
      filePath: 'files/officialMenu.pdf'
    }
  }
}
</script>

NuxtとVue.jsの新機能。ありがとう！

javascriptvue.jsvue-componentnuxt.js
4
user805981

Nuxtは、vue-routerのドキュメントを読み上げることで、vue-routerを使用します。これにより、必要なことを実現できます。

ルーターリンクのドキュメント

以下の例

<!-- named route -->
<nuxt-link :to="{ name: 'user', params: { userId: 123 }}">User</nuxt-link>

<!-- with query, resulting in `/register?plan=private` -->
<nuxt-link :to="{ path: 'register', query: { plan: 'private' }}">Register</nuxt-link>

これは、次のページの$ routeオブジェクトで$ route.paramsとして、または上記のURLクエリで使用できます。

9
sevensilvers