nuxt.jsについて,ネストされたルートで生成されたページ間で遷移ができないです。
ネストされたルートを設定し,json内のidを付与したページを作りました。(ディレクトリは以下のようになっています)
assets/ --| data.json pages/ --| users/ -----| _id.vue -----| index.vue --| users.vue --| index.vue dist/ --| users/ -----| 1 /index.html -----| 2 /index.html -----| 3 /index.html --| index.vue
dist/users 内のページに設置したリンク(下記のnuxt-link)から他のdist/users 内のページに飛ぶと,リンクは変化するのですが,画面が元のページのままになってしまいます。(「描画されない」と言うのでしょうか?)
pages/users.vue
~ <ul> <li v-for="user in userList" :key="user.id"> <nuxt-link :to="'/user/'+user.id" v-text="user.name"></nuxt-link> </li> </ul> ~ <script> import json from './../assets/data.json' export default { data () { return { userList: json } } } </script>
おそらく公式ドキュメントの
https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html
に書いてある「ユーザーが遷移するときに同じコンポーネントインスタンスが再利用される」のが原因ではないかと思っています。
どのようにすればnuxt-linkで飛んだ先のページを表示できるのか教えていただけないでしょうか。
もし可能ならばコードもいただけると幸いです。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー