LoginSignup
0
0

More than 1 year has passed since last update.

Vue Routerが動かない、URLは変わってもコンポーネント,表示が切り替わらないときに試すこと

Last updated at Posted at 2022-10-03

環境

Vue.js:2.6.12
Laravel:8.52.0

Laravelのbladeの中で、Vueコンポーネントを表示させている状態です。

問題

個人開発でVueを使っているときに気が付いた問題

Vue RouterでのSPAを実装できたと思っていたけど、
URLは正常に変わっても、コンポーネントの表示が切り替わらない・・・
リロードするとコンポーネントは正常に切り替わる。

いままで開発中にデータのやりとりが出来ているかなど確認する際は、
毎回URL直打ちして、毎回リロードしていたのを忘れてました(汗)

解決方法

  • 変更前
vue
<template>
 <div>
    <router-view></router-view>
 </div>
</template>
  • 変更後

keyに一意の値(今回は$route.fullPath)を入れます。

vue
<router-view :key="$route.fullPath"></router-view>

VueRouterが動くたびに、keyで一意の値が識別されることでコンポーネントが再利用されず、切り替わるようになりました。

「SPA動かない」「VueRouter コンポーネント 変わらない」などのキーワードで
私が調べた際は、beforeRouteUpdate()について紹介してる記事がたくさんありましたが、
このやり方はほとんど見つからなかったので書いてみました。
そもそもなんで再利用されてしまうのか、という根本的な原因までは分かりませんでしたが・・・
ひとまず動いてます🙏🙏

参考記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0