問題タブ [quasar]

現在、Quasar アプリを開発しています。これまでのところ、ログイン ページと quasar が提供するデフォルトのレイアウトしかありません。ポート100で実行するように設定した別のサーバーがあります。プロキシを設定して、axiosおよびsocket.ioからのすべての呼び出しを、アプリケーションのmySQLデータベースをホストするサーバーにリダイレクトします。すでにルートを設定しており、ブラウザーの検索でルートを手動で入力するとそこに移動できますが、ログインで this.$router.push() を使用してメイン ページに移動すると、ナビゲートされません。それ。たとえば、ポート 8080 でこのアプリをホストしています。デフォルトでは、「localhost:8080」のログイン ページに移動します。ログインが認証されると、ユーザーは this.$router.push('/main') を使用してクエーサー アプリ内のメイン ページにリダイレクトされるはずです。ただし、これは行いません。ログインを押すと、URL が「localhost:8080/?」に変わるだけです。ただし、ブラウザで手動で「localhost:8080/main」と入力すると、メイン ページに移動します。私のルートのコードは次のとおりです。

ログインコンポーネントのコードは次のとおりです。

問題の可能性があるものを検索するのに何時間も費やしましたが、これまでのところ、有用なものは何も見つかりませんでした. もしかしたらバグかも？私の同僚は私のコードを調べましたが、問題はありませんでした。うまくいけば、皆さんが私を助けてくれます。とても感謝しております。

要求に応じて、サーバー コード:

ルーター コードの index.js:

編集：解決済み、回答を参照してください。

したがって、私は vue.js と quasar を初めて使用するので、おそらく vue ライフサイクル フックと vue 反応性に関する初歩的な間違いです。

ブラウザのサイズに基づいて要素のサイズを変更したい。この要素の高さは、他の要素の高さを使用して計算されます。$refs を使用して他の要素の高さを取得し、quasar コンポーネントによって開始された onResize() イベントをキャプチャします。

このイベントは、ページの読み込み時に 1 回起動されます。DOM でまだレンダリングされていないと思われるため、要素のサイズはすべて 0 です。「onResize」イベントがキャプチャされたとき、および「mounted()」vue.jsフックでも呼び出す、計算された高さを更新するメソッドがあります。

私の問題は：

• 最初の onResize() はメソッドを呼び出しますが、すべての要素の高さは 0px です。
• Mounted() メソッドが再度呼び出され、ここですべての要素の高さが計算されます。結果は良好ですが、ディスプレイには表示されません。スクリーンショット #1 を参照してください: サイズ変更イベントとコンソールに記録されたサイズ。サイズは 2 回計算されることに注意してください。Mounted() のものは価値がありますが、DOM には表示されません。

• ウィンドウのサイズを一度変更すると、すべて問題なく、もう問題はありません。(スクリーンショット #2 (ウィンドウ モード) と #3 (再びフルスクリーン))

私の質問は、正しく計算されていても、mounted() フックが呼び出されたときに DOM で高さが更新されないのはなぜですか? (すべてが同じ .vue ファイルにあります)

私のコード:私の問題は、「tableRow」refを持つdivの高さにあります

脚本：

だから、私は vue.js にかなり慣れていないので、それは私の愚かな間違いかもしれませんが、残念ながら、2 時間以上検索して見つけたので、Google は今日私の友達ではないようですなし。

コンポーネントをロードしようとすると問題が発生します。このコンポーネントは他のコンポーネントにネストされており、ルーターがそれをロードすることになっています。<router-view></router-view>問題なく（およびルーターを使用して）そのようにロードする他のコンポーネントがあります。このコンポーネントの唯一の違いは、ルートの下に 3 レベル入れ子になっていることです。他のすべてのコンポーネントの中で、最も深いのは 2 レベルです。

このコンポーネントを読み込もうとすると、2 つの警告とエラーが表示されます。

警告 1 :

警告 2:

エラー：

私のルーティングは次のようになります。両方のbeforeEnterフックが必要なときに呼び出されます。ロードに失敗するコンポーネントは次のsmsConfigDetailsとおり です。

ロードに失敗するコンポーネントのコードは、今のところ非常に単純です。

親は1つだけ<router-view></router-view>