1---
2title: beforeRouteEnter Cannot Access Component Instance
3impact: MEDIUM
4impactDescription: The beforeRouteEnter guard runs before component creation, so 'this' is undefined; use the next callback to access the instance
5type: gotcha
6tags: [vue3, vue-router, navigation-guards, lifecycle, this]
7---
8 
9# beforeRouteEnter Cannot Access Component Instance
10 
11**Impact: MEDIUM** - The `beforeRouteEnter` in-component navigation guard executes BEFORE the component is created, meaning you cannot access `this` or any component instance properties. This is the ONLY navigation guard that supports a callback in the `next()` function to access the component instance after navigation.
12 
13## Task Checklist
14 
15- [ ] Use next(vm => ...) callback to access component instance
16- [ ] Or use composition API guards which have different patterns
17- [ ] Move data fetching logic appropriately based on timing needs
18- [ ] Consider using global guards for data that doesn't need component access
19 
20## The Problem
21 
22```javascript
23// Options API - WRONG: this is undefined
24export default {
25  data() {
26    return { user: null }
27  },
28  beforeRouteEnter(to, from, next) {
29    // BUG: this is undefined here - component doesn't exist yet!
30    this.user = await fetchUser(to.params.id)  // ERROR!
31    next()
32  }
33}
34```
35 
36## Solution: Use next() Callback (Options API)
37 
38```javascript
39// Options API - CORRECT: Use callback to access vm
40export default {
41  data() {
42    return {
43      user: null,
44      loading: true
45    }
46  },
47 
48  beforeRouteEnter(to, from, next) {
49    // Fetch data before component exists
50    fetchUser(to.params.id)
51      .then(user => {
52        // Pass callback to next() - receives component instance as 'vm'
53        next(vm => {
54          vm.user = user
55          vm.loading = false
56        })
57      })
58      .catch(error => {
59        next(vm => {
60          vm.error = error
61          vm.loading = false
62        })
63      })
64  }
65}
66```
67 
68## Solution: Async beforeRouteEnter (Options API)
69 
70```javascript
71export default {
72  data() {
73    return { userData: null }
74  },
75 
76  async beforeRouteEnter(to, from, next) {
77    try {
78      const user = await fetchUser(to.params.id)
79 
80      // Still need callback for component access
81      next(vm => {
82        vm.userData = user
83      })
84    } catch (error) {
85      // Redirect on error
86      next('/error')
87    }
88  }
89}
90```
91 
92## Composition API Alternative
93 
94In Composition API with `<script setup>`, you cannot use `beforeRouteEnter` directly because the component instance is being set up. Use different patterns instead:
95 
96```vue
97<script setup>
98import { ref, onMounted } from 'vue'
99import { useRoute, onBeforeRouteUpdate } from 'vue-router'
100 
101const route = useRoute()
102const user = ref(null)
103const loading = ref(true)
104 
105// Option 1: Fetch in onMounted (after component exists)
106onMounted(async () => {
107  user.value = await fetchUser(route.params.id)
108  loading.value = false
109})
110 
111// Option 2: Handle subsequent param changes
112onBeforeRouteUpdate(async (to, from) => {
113  if (to.params.id !== from.params.id) {
114    loading.value = true
115    user.value = await fetchUser(to.params.id)
116    loading.value = false
117  }
118})
119</script>
120```
121 
122## Route-Level Data Fetching
123 
124For data that should load BEFORE navigation, use route-level guards:
125 
126```javascript
127// router.js
128const routes = [
129  {
130    path: '/users/:id',
131    component: () => import('./UserProfile.vue'),
132    beforeEnter: async (to, from) => {
133      try {
134        // Store data for component to access
135        const user = await fetchUser(to.params.id)
136        to.meta.user = user  // Attach to route meta
137      } catch (error) {
138        return '/error'
139      }
140    }
141  }
142]
143```
144 
145```vue
146<!-- UserProfile.vue -->
147<script setup>
148import { useRoute } from 'vue-router'
149 
150const route = useRoute()
151// Access pre-fetched data from meta
152const user = route.meta.user
153</script>
154```
155 
156## Comparison of Navigation Guards
157 
158| Guard | Has `this`/component? | Can delay navigation? | Use case |
159|-------|----------------------|----------------------|----------|
160| beforeRouteEnter | NO (use next callback) | YES | Pre-fetch, redirect if data missing |
161| beforeRouteUpdate | YES | YES | React to param changes |
162| beforeRouteLeave | YES | YES | Unsaved changes warning |
163| Global beforeEach | NO | YES | Auth checks |
164| Route beforeEnter | NO | YES | Route-specific validation |
165 
166## Key Points
167 
1681. **beforeRouteEnter runs before component creation** - No access to `this`
1692. **Use next(vm => ...) callback** - Only way to access component instance
1703. **Composition API has limitations** - Use onMounted or global guards instead
1714. **Consider route meta for pre-fetched data** - Clean separation of concerns
1725. **beforeRouteUpdate and beforeRouteLeave have component access** - They run when component exists
173 
174## Reference
175- [Vue Router In-Component Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards)
176- [Vue Router Navigation Resolution Flow](https://router.vuejs.org/guide/advanced/navigation-guards.html#the-full-navigation-resolution-flow)
177