4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

vue-routerでのNavigationDuplicatedエラー

Posted at

NavigationDuplicatedエラーとは

vue-routerでの遷移時、現在いるrouteと同じrouteに移動しようとすると発生する。
このエラーで検索すると router.push などの戻りをcatchすることでエラーを出さない(無視する)方法を挙げている方がいるが、そもそも現在いるrouteと同じrouteに遷移する必要はないはずなので遷移しないというのが正しいんじゃないかなと思う。

遷移先が現在と同じrouteの場合遷移しない

<script>
export default {
	methods: {
		transition: function() {
			if (this.$route.name !== this.name) {
				this.$router.push({ path: 'home' })
			}
		}
	}
}
</script>

名前付きルートの場合

<script>
export default {
	props: ['name'],
	methods: {
		transition: function() {
			if (this.$route.name !== this.name) {
				this.$router.push({ name: this.name })
			}
		}
	}
}
</script>
4
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
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?