Vue

【Vue.js】戻るボタンを実装する方法【VueRouter】

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

Vue の VueRouter を使って、前のページに戻るボタンを実装する方法についてまとめました

VueRouter で前のページに戻るボタンを設置します

正解の例

<a @click="$router.back()">戻る</a>

ダメだった例

<router-link :to="$router.back">戻る</route-link>

下のボタンだとページが読み込まれると戻るが発動して、勝手に戻っちゃうので、

正解の例でいいんじゃないでしょーか。

それでは。

この機能は、ブラウザの戻ると同じ挙動になります

もし、パンくずリストのように、1 個階層を戻したい時の場合であれば、しっかり

<router-link :to="{ name: 'ikkomaeno-name'}">戻る</router-link>

このように、ルーティング先を指定した方が良いと思います。

それでは!

新しめの記事たち

Nuxt.js でデプロイ時のデータが常に表示されて更新が反映されない時の対処法

⇨Vue の Computed 算出プロパティを使う方法