質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

7089閲覧

nuxt.jsでネストされたルート内でページ遷移できない

tjeu

総合スコア10

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2018/09/04 07:31

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で飛んだ先のページを表示できるのか教えていただけないでしょうか。
もし可能ならばコードもいただけると幸いです。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fuuki

2018/09/05 03:28

生成は 'nuxt build' 'nuxt generate' どちらでしょうか?また,開発サーバーではうまく動作しますか?
tjeu

2018/09/05 03:32

返信ありがとうございます。'nuxt dev' (localhost),'nuxt generate'の両方においてルート生成のページ間で画面が変化しないです。
guest

回答1

0

ベストアンサー

nuxt generate で生成した場合、静的ページになるはずなので、dist に生成された html を確認して目的のものが生成されているか確認すると良いかと思います。

ただし、今回は開発モードの起動でもページが表示されないということなので、おそらく原因はこちらかと思います。
https://ja.nuxtjs.org/api/components-nuxt-child/

今回の場合は pages/users.vue<nuxt-child/> を挿入することで解決するかと思います。

ご確認よろしくお願いいたします。

投稿2018/09/05 12:54

fuuki

総合スコア70

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問