この記事では主に、更新後に vue-router ルーティング パラメータ が消える問題を紹介します
シナリオ: vue-router はシングルページ アプリケーションを実装し、ログイン ページが ログイン インターフェイス を呼び出した後、サーバーはユーザーを返します。 .push({name: 'index', params: res.data}) がホームページ コンポーネントに渡され、データがホームページに表示されます。しかし、ページを更新するとデータが消えてしまいました。
解決策:
1、セッション&サーバーレンダリング
従来の解決策は、ログインページとホームページが2つの別個のページであるというもので、ログインに成功した後、サーバーはユーザー情報に対応するセッションを生成し、次に、ホームページ データをレンダリングし、応答ヘッダーを通じてセッション ID をブラウザに渡し、対応する cookie ファイルを生成します。このようにして、次回ページがリクエストされると、ブラウザは http ヘッダーに対応する Cookie を取り込み、サーバーは Cookie 内のセッション ID に基づいてユーザーがログインしているかどうかを判断し、ユーザー データを表示します。 。
プロジェクトがフロントエンドとバックエンドの分離という考え方を採用しており、サーバーがインターフェイスのみを提供し、サーバーレンダリングを実行しない場合、この方法は機能しません。
2. $route.query
ルーティング時にログイン リクエスト パラメータを持ち込むことができます:
router.push({name:'index', query:{username: 'xxx', password: 'xxxxxx'}}) ... this.$ajax({ url: 'xxx', method: 'post', data: { username: this.$route.query.username, password: this.$route.query.password } })
このようにして、ログイン パラメータは次のように URL に保存されます。 xxx.xxx/index?username=xxx&password=xxxxxx" と入力し、作成したフック内のログイン インターフェイスを呼び出してデータを返します。
3. Cookie
もう 1 つの方法は、ログイン パラメータを Cookie に保存し、作成されたフックで Cookie に保存されている情報を取得して、ログイン インターフェイスを呼び出すことです。ユーザー名とパスワードを Cookie に保存することも不合理です。改良版では、ログインに成功するとサーバーがトークンを返し、有効期間内にそのトークンを介してユーザー データが取得されます。文字列であり、「=」でリンクされているため、Cookieを操作する追加のメソッドを記述する必要があります。
<script> function setCookie (name, value, exdays) { let date = new Date() date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000)) let expires = "expires=" + date.toGMTString() document.cookie = name + "=" + value + "; " + expires } function getCookie (name) { name = name + "=" let cookieArr = document.cookie.split(';') for (let i = 0; i < cookieArr.length; i++) { let cookie = cookieArr[i].trim() if (cookie.indexOf(name) === 0) { return cookie.slice(name.length) } } return "" }
4. HTML5 Web ストレージ
Web ストレージに関しては、多くのブラウザがそれをサポートしていないと無意識に考えざるを得ません。実際、IE8 以降は localStorage と sessionStorage をサポートしています。 Vue プロジェクトは少なくとも IE9 をサポートしているため、Web ストレージを安心して使用できます。rreee
上記は、私が最近の仕事で遭遇した問題です。最終的な解決策は、sessionStorage を使用してデータを保存することでした。より良い解決策がある場合は、お気軽に教えてください。上記がこの記事の全内容です。学習が皆様のお役に立てば幸いです。皆様も Script Home をサポートしていただければ幸いです。以上がvue ルーターのルーティングパラメータが更新後に消える問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。