vue-router-best-practices

Vue Router reuses the component instance when navigating between the same route with different params, so onMounted and created hooks do not fire again. Fix it by watching route.params with immediate: true or using the onBeforeRouteUpdate in-component guard to refetch data.

Infinite loops happen when a guard redirects to a route that triggers the same guard again. Exclude the target route from the check, use route meta fields like requiresAuth to control which routes need protection, and test direct URL access and refresh scenarios.

The beforeRouteEnter guard runs before the component is created, so this is undefined. Use the next(vm => ...) callback to access the instance after navigation, or in Composition API fetch data in onMounted or via route meta instead.

Vue Router 4 deprecates the next() callback in favor of return-based syntax. Return a route to redirect, false to cancel, or nothing to proceed. If legacy code uses next(), it must be called exactly once per code path with an early return after each call.

No. Per-route beforeEnter guards only fire when entering from a different route, not when params, query, or hash change within the same route. Use onBeforeRouteUpdate in the component or a global beforeEach guard for param-based validation.

Simple hash routing with hashchange listeners is acceptable only for learning or tiny prototypes, and requires manual event listener cleanup on unmount. Production SPAs need Vue Router for navigation guards, nested routes, lazy loading, history mode, and scroll behavior.