はじめに
Laravel + Nuxt.jsで開発中に、とあるページで、「直前に開いていたページに戻る」ボタンの設置を実装することがありました。色々調べると、VueRouterを使用している場合、back()関数というもので、簡単に実装できることを知りやってみました。
開発状況（Version）
macOS Big Sur
Virtual Box 6.1.26
Laravel Mix 5.0
Laravel 6.20.4
PHP 7.3.29
node.js 16.13.2
Nuxt.js 6.14.11
Vue.js 2.6.14
方法
結論から言うと、下記をv-btnの中に記載すれば、完成。凄く簡単ですね。
@click="$router.back()"こんな感じです。
<v-btn
@click="$router.back()"
>
戻る
</v-btn>ちなみに
「SPA では Router なのでブラウザバックと同じ挙動を定義してあげれば良いと思いますが、普通の HTML や検索エンジンに載せる前提で作られる SSR であれば、ブラウザバックと同じ挙動より、しっかり a タグで href でリンク先を指定することを推奨します。」
との記事にもあったりしたので、SPAで、VueRouterを使用しているときに限ったやり方と認識していた方が良いです。
最後に
凄く便利な機能だなと感じましたが、使用すべき箇所が限定的のようなので、その辺を意識して今後も使用していきたいと思います。
それにしても、便利だ！
コメント