/vue-router-best-practices

beforeRouteEnter Cannot Access Component Instance

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.

Task Checklist

• Use next(vm => ...) callback to access component instance
• Or use composition API guards which have different patterns
• Move data fetching logic appropriately based on timing needs
• Consider using global guards for data that doesn't need component access

The Problem

// Options API - WRONG: this is undefined
export default {
  data() {
    return { user: null }
  },
  beforeRouteEnter(to, from, next) {
    // BUG: this is undefined here - component doesn't exist yet!
    this.user = await fetchUser(to.params.id)  // ERROR!
    next()
  }
}

Solution: Use next() Callback (Options API)

// Options API - CORRECT: Use callback to access vm
export default {
  data() {
    return {
      user: null,
      loading: true
    }
  },

  beforeRouteEnter(to, from, next) {
    // Fetch data before component exists
    fetchUser(to.params.id)
      .then(user => {
        // Pass callback to next() - receives component instance as 'vm'
        next(vm => {
          vm.user = user
          vm.loading = false
        })
      })
      .catch(error => {
        next(vm => {
          vm.error = error
          vm.loading = false
        })
      })
  }
}

Solution: Async beforeRouteEnter (Options API)

export default {
  data() {
    return { userData: null }
  },

  async beforeRouteEnter(to, from, next) {
    try {
      const user = await fetchUser(to.params.id)

      // Still need callback for component access
      next(vm => {
        vm.userData = user
      })
    } catch (error) {
      // Redirect on error
      next('/error')
    }
  }
}

Composition API Alternative

In Composition API with <script setup>, you cannot use beforeRouteEnter directly because the component instance is being set up. Use different patterns instead:

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

const route = useRoute()
const user = ref(null)
const loading = ref(true)

// Option 1: Fetch in onMounted (after component exists)
onMounted(async () => {
  user.value = await fetchUser(route.params.id)
  loading.value = false
})

// Option 2: Handle subsequent param changes
onBeforeRouteUpdate(async (to, from) => {
  if (to.params.id !== from.params.id) {
    loading.value = true
    user.value = await fetchUser(to.params.id)
    loading.value = false
  }
})
</script>

Route-Level Data Fetching

For data that should load BEFORE navigation, use route-level guards:

// router.js
const routes = [
  {
    path: '/users/:id',
    component: () => import('./UserProfile.vue'),
    beforeEnter: async (to, from) => {
      try {
        // Store data for component to access
        const user = await fetchUser(to.params.id)
        to.meta.user = user  // Attach to route meta
      } catch (error) {
        return '/error'
      }
    }
  }
]

<!-- UserProfile.vue -->
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
// Access pre-fetched data from meta
const user = route.meta.user
</script>

Comparison of Navigation Guards

Key Points

1. beforeRouteEnter runs before component creation - No access to this
2. Use next(vm => ...) callback - Only way to access component instance
3. Composition API has limitations - Use onMounted or global guards instead
4. Consider route meta for pre-fetched data - Clean separation of concerns
5. beforeRouteUpdate and beforeRouteLeave have component access - They run when component exists

Reference

• Vue Router In-Component Guards
• Vue Router Navigation Resolution Flow