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

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

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

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

Q&A

解決済

1回答

223閲覧

context.route が変化しない

mochi.monaka

総合スコア26

Nuxt.js

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

0グッド

0クリップ

投稿2019/03/23 05:18

Nuxt v2.5.1

nuxt.config.js

js

1mode: 'universal', 2plugins: ['~plugins/axios', ...],

plugins/axios.js

js

1export default function ({ route, from }) { 2 $axios.onRequest(config => { 3 console.log(route) 4 5 return config 6 }) 7}

ページ遷移する度にリクエストがインタラプトされます(たとえばasyncData()でのリクエスト)。
そのときrouteを観察してみると、どこに遷移してもrouteが変化していません。 SSR 時のrouteから変わりません。

/ にアクセスする console.log --> { path: '/', ... } ↓ /users へ遷移する console.log --> { path: '/', ... } ↓ /products へ遷移する console.log --> { path: '/', ... }

同じように、/usersへのアクセスから始めればどこに遷移しても{ path: '/users' }のままです。

これは仕様として正しい動作でしょうか?

私が期待する動作は、遷移直後のページのルート情報を得るものです。
/usersから/productsに遷移したとき products ページのasyncData()でのリクエストでは{ path: '/products', ... }になるはずだと思っています。

もしasyncData()が解決されるまでは route 更新されない仕様だとして、products ページのasyncData()内ではまだ{ path: '/users' }のままということはあっても、 SSR 時の{ path: '/', ... }のままというのはおかしいと思い、本来どういう動作が正しいのか質問します。

それと、上記コード同箇所で、fromがいつもundefinedのままというのも不自然に思っています。ここは/productsへの遷移でいうなら/usersになっているはずと思うのですが。。

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

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

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

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

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

guest

回答1

0

自己解決

再現するための小さなプロジェクトを書いたところ、質問時の状況に変わりありませんが、

遷移の度にasyncData()内では期待どおりcontenxt.routeは更新されていて、$axios.onRequest()の中だけで変わっていないことがわかりました。
併せて、asyncData()内でのcontenxt.routeは、プロミス解決される以前に既に遷移後のページのrouteに変わっていることも確認しました。

Nuxtというより@nuxtjs/axiosモジュールの不具合の可能性もあるように感じましたので、本家に報告したいと思います。
Nuxtプロジェクトへの報告は単にIssueをあげればよいだけでなく再現コードの用意などが必須で、当件は閉じた環境でシンプルな再現コードを書くのが少し大変そうに思えたのでこちらで質問しました。書いてみると大変でもありませんでした。。

投稿2019/03/23 07:03

mochi.monaka

総合スコア26

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問