APIからデータを取得して一覧表示するという記事をお届けしました。ご覧になっていない方のために簡単に説明すると、この記事は「wordpressから取得した記事データを使って、Vueで表示する」といった内容になっています。その表示内容は「選択されたカテゴリによって表示が変わる」ようになっていました。実はメインの目的がwordpressからのデータ取得だったので省略したのですが、実際のサイトでこのまま実装すると、ひとつユーザビリティとしては足りない部分があったりします。それは・・・もしページ移動して、ブラウザの戻るボタンをクリックされてしまうとVueの内容は初期化されてしまうというものです。これは例えば、ある特定のキーワードで検索して、そこからページ移動をしたとすると、その後「戻る」ボタンを使って戻ってこられても検索結果が初期化されてしまい、「えーっ、また検索しなきゃいけないのかよ・・・😫」となってしまうという意味になります。そこで!今回は、ページ移動した後でもVueの変数の内容を保持するテクニックをご紹介したいと思います。storageなどにその内容を保存しておいて後で取り出すという方法があるのですが、今回はもっとシンプルに実装する方法を使います。それはどんな方法かというと「URLのハッシュ値#を使った」方法です。ハッシュ値とは、例えばこんなサンプルになります。https://example.com#testハッシュ値は、ページ内の特定の位置に自動的に移動させるためによく使われるのですが、今回はこのハッシュ値にVueの変数を含ませて実装していきます。実装する内容ハッシュ値を使ったサンプルのために、今回は以下のような機能をもったページを作っていきます。)を一覧表示する色のうちの1つがクリックされたら「選択された色」として表示そして、選択された色はページでリロードしようと、戻るボタンで戻ってこられても保持できるようにするでは、実際のコードをみていきましょう!実際のコードそれほどコードは長くないので完成版のソースコードをご覧ください。});</script></body></html>まず、この中で一番重要なのは、parseHash()です。今回のコードは以下のようなハッシュ値でVueの値を保持することを想定しているのですが、parseHash()はこの内容を分解して値を復活させるメソッドになっています。https://example.com#key1=value1,key2=value2ただし、今回選択された色のキーはidを使いますので、実際には以下の部分でハッシュ値から値を復活させることになります。parseInt(value);}そして、次に重要な部分はmounted()です。this.parseHash();}ここでは、まずhashchangeというあまり耳慣れないJavaScriptイベントを設定していますが、これは「ハッシュ値が変更になったときに起動するイベント」になります。(もちろん実行するのは先ほどのparseHash()です)また、戻るボタンで戻ってきた場合やページがリロードされたときのことも想定して直接parseHash()を実行していることにも注目してください。最後は、以下の色リンクの部分です。v-text="color.name"></a>少し分かりにくいかもしれませんので、Vueでレンダリングしたサンプルをご覧ください。255);">赤</a>つまり、リンク自体にはクリックイベントは全く存在せず、href=""でハッシュ値を変更することで、先ほど説明したhashchangeイベントが起動するようになっているという仕組みです。あとは、これまでのVueの記事を参考にしていただけると問題なく理解できるかと思います。テストしてみるでは実際にテストをしてみましょう!まずはページを表示したところです。黄色をクリックしてみましょう。この時点でハッシュはhttps://*****/vue_keep_params#id=3になっています。この状態で一回ページ下に用意した外部サイト(Google)に移動してみます。Googleのトップページが表示されます。ここから戻るボタンをクリックして先ほどのページに戻ってみましょう。はい!画像のように選択された黄色のデータは保持されたままです。これは#id=3からデータを復活させたからですね。お疲れ様でした😊✨ダウンロードする今回実際に開発したソースコードを以下からダウンロードすることができます。CDNを使っているので、展開したらすぐ試せますよ✨ページ移動してもVueの状態を保持する方法おわりにということで、今回はVueのデータをページ移動やリロードがあっても保持するテクニックをご紹介しました。このテクニックを使えば、検索や絞り込みなどにも幅広く使えると思うのでぜひ活用してみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。