1---
2title: Per-Route beforeEnter Guards Ignore Param/Query Changes
3impact: MEDIUM
4impactDescription: Route-level beforeEnter guards don't fire when only params, query, or hash change, causing unexpected bypasses of validation logic
5type: gotcha
6tags: [vue3, vue-router, navigation-guards, params, query]
7---
8 
9# Per-Route beforeEnter Guards Ignore Param/Query Changes
10 
11**Impact: MEDIUM** - The `beforeEnter` guard defined in route configuration only triggers when entering a route from a DIFFERENT route. Changes to params, query strings, or hash within the same route do NOT trigger `beforeEnter`, potentially bypassing important validation logic.
12 
13## Task Checklist
14 
15- [ ] Use in-component `onBeforeRouteUpdate` for param/query changes
16- [ ] Or use global `beforeEach` with route.params/query checks
17- [ ] Document which guards protect which scenarios
18- [ ] Test navigation between same route with different params
19 
20## The Problem
21 
22```javascript
23// router.js
24const routes = [
25  {
26    path: '/orders/:id',
27    component: OrderDetail,
28    beforeEnter: async (to, from) => {
29      // This runs when entering from /products
30      // But NOT when navigating from /orders/1 to /orders/2!
31      const order = await checkOrderAccess(to.params.id)
32      if (!order.canView) {
33        return '/unauthorized'
34      }
35    }
36  }
37]
38```
39 
40**Scenario:**
411. User navigates from `/products` to `/orders/1` - beforeEnter runs, access checked
422. User navigates from `/orders/1` to `/orders/2` - beforeEnter DOES NOT run!
433. User might access order they don't have permission for!
44 
45## What Triggers beforeEnter vs. What Doesn't
46 
47| Navigation | beforeEnter fires? |
48|------------|-------------------|
49| `/products` → `/orders/1` | YES |
50| `/orders/1` → `/orders/2` | NO |
51| `/orders/1` → `/orders/1?tab=details` | NO |
52| `/orders/1#section` → `/orders/1#other` | NO |
53| `/orders/1` → `/products` → `/orders/2` | YES (leaving and re-entering) |
54 
55## Solution 1: Add In-Component Guard
56 
57```vue
58<!-- OrderDetail.vue -->
59<script setup>
60import { onBeforeRouteUpdate } from 'vue-router'
61 
62// Handle param changes within the same route
63onBeforeRouteUpdate(async (to, from) => {
64  if (to.params.id !== from.params.id) {
65    const order = await checkOrderAccess(to.params.id)
66    if (!order.canView) {
67      return '/unauthorized'
68    }
69  }
70})
71</script>
72```
73 
74## Solution 2: Use Global beforeEach Instead
75 
76```javascript
77// router.js
78router.beforeEach(async (to, from) => {
79  // Handle all order access checks globally
80  if (to.name === 'OrderDetail') {
81    // This runs on EVERY navigation to this route, including param changes
82    const order = await checkOrderAccess(to.params.id)
83    if (!order.canView) {
84      return '/unauthorized'
85    }
86  }
87})
88```
89 
90## Solution 3: Combine Both Guards
91 
92```javascript
93// router.js - For entering from different route
94const routes = [
95  {
96    path: '/orders/:id',
97    component: OrderDetail,
98    beforeEnter: (to) => validateOrderAccess(to.params.id)
99  }
100]
101 
102// In component - For param changes within route
103// OrderDetail.vue
104onBeforeRouteUpdate((to) => validateOrderAccess(to.params.id))
105 
106// Shared validation function
107async function validateOrderAccess(orderId) {
108  const order = await checkOrderAccess(orderId)
109  if (!order.canView) {
110    return '/unauthorized'
111  }
112}
113```
114 
115## Solution 4: Use beforeEnter with Array of Guards
116 
117```javascript
118// guards/orderGuards.js
119export const orderAccessGuard = async (to) => {
120  const order = await checkOrderAccess(to.params.id)
121  if (!order.canView) {
122    return '/unauthorized'
123  }
124}
125 
126// router.js
127const routes = [
128  {
129    path: '/orders/:id',
130    component: OrderDetail,
131    beforeEnter: [orderAccessGuard]  // Can add multiple guards
132  }
133]
134 
135// Still need in-component guard for param changes!
136```
137 
138## Full Navigation Guard Execution Order
139 
140Understanding when each guard type fires:
141 
142```
1431. beforeRouteLeave (in-component, leaving component)
1442. beforeEach (global)
1453. beforeEnter (per-route, ONLY when entering from different route)
1464. beforeRouteEnter (in-component, entering component)
1475. beforeResolve (global)
1486. afterEach (global, after navigation confirmed)
149 
150For param/query changes on same route:
1511. beforeRouteUpdate (in-component) - ONLY this fires!
1522. beforeEach (global)
1533. beforeResolve (global)
1544. afterEach (global)
155```
156 
157## Key Points
158 
1591. **beforeEnter is for route ENTRY only** - Not for within-route changes
1602. **Use onBeforeRouteUpdate for param changes** - This is the in-component solution
1613. **Global beforeEach always runs** - Good for centralized validation
1624. **Test param change scenarios** - Easy to miss during development
1635. **Consider security implications** - Param-based access control needs both guards
164 
165## Reference
166- [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)
167- [Vue Router Per-Route Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard)
168