Vueルーターの画面遷移のエラー、ナビゲーションがキャンセルされた…によって解決する

2年 ago
優斗, 朝陽
1 minute

Vue Router でルーティングを行った際に、「Navigation cancelled from …… to with a new navigation」というエラーが発生する場合、同一のルーティングリンクを複数回クリックするなど、非同期ルーティング遷移処理を複数回行おうとしたことが原因です。

対処法：

  1. 同じルーティングリンクが何度もクリックされているか、コードを確認すること。クリックイベントを防止するには、ルーティングリンクに @click.prevent イベントを追加するか、 タグを使用して、ルーティングが完全一致する場合にのみ active クラスが追加されるようにします。
  2. router.push() メソッドを使って非同期ルーティング遷移を行う場合は、router.replace() メソッドを代わりに使用して、ルーティング遷移が一度だけ行われるようにします。
  3. 上記の方法がすべて無効な場合は、ルートジャンプ前に this.$router.currentRoute.meta.keepAlive = false を追加してルートのキャッシュを解除してからジャンプしてみてください。

サンプルコード：

<template>
<div>
<router-link to="/home" @click.prevent>Home</router-link>
<router-link to="/about" @click.prevent>About</router-link>
<router-link-exact-active to="/home">Home</router-link-exact-active>
<router-link-exact-active to="/about">About</router-link-exact-active>
</div>
</template>
<script>
export default {
methods: {
goToHome() {
this.$router.replace('/home');
},
goToAbout() {
this.$router.replace('/about');
}
}
}
</script>

上記の方法で問題が解決することをお祈りしております。

bannerAds