oxc-project/oxc · error · OxcDiagnostic

`beforeRouteEnter` does NOT have access to `this` component

Error message

`beforeRouteEnter` does NOT have access to `this` component instance.

What it means

The vue/no-this-in-before-route-enter rule fires when `this` appears inside a component's `beforeRouteEnter` navigation guard. vue-router runs `beforeRouteEnter` before the component instance exists (it is extracted from the route definition via find_property and scanned for `this` expressions using ThisExpressionFinder), so `this` is undefined there. The rule's help text points to the supported alternative: the `next(vm => ...)` callback receives the created instance.

Source

Thrown at crates/oxc_linter/src/rules/vue/no_this_in_before_route_enter.rs:18

use oxc_ast::{
    AstKind,
    ast::{ExportDefaultDeclarationKind, Expression},
};
use oxc_ast_visit::VisitJs;
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::Span;

use crate::{
    AstNode,
    context::LintContext,
    rule::Rule,
    utils::{ThisExpressionFinder, find_property},
};

fn no_this_in_before_route_enter_diagnostic(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("`beforeRouteEnter` does NOT have access to `this` component instance.")
        .with_help("Use the callback's `vm` parameter instead of `this` in `beforeRouteEnter`.")
        .with_label(span)
}

#[derive(Debug, Default, Clone)]
pub struct NoThisInBeforeRouteEnter;

declare_oxc_lint!(
    /// ### What it does
    ///
    /// Disallow `this` usage in a `beforeRouteEnter` method.
    ///
    /// This rule is only relevant when using `vue-router`.
    ///
    /// ### Why is this bad?
    ///
    /// Inside a `beforeRouteEnter` method, there is no access to `this`.
    /// See [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards).

View on GitHub (pinned to e1e7af627c)

Solutions

1. Access the instance via the next callback: `next(vm => vm.loadData())`.
2. If no instance access is needed, replace `this` usages with imports or route params (`to.params`).
3. Consider `beforeRouteUpdate` if the guard only needs to run when navigating between routes that reuse the component.
4. Re-run oxlint to confirm.

Example fix

// before
beforeRouteEnter(to, from, next) {
  this.loadUser(to.params.id); // no access to `this`
  next();
}

// after
beforeRouteEnter(to, from, next) {
  next((vm) => vm.loadUser(to.params.id));
}

When it happens

Trigger: Defining `beforeRouteEnter(to, from, next) { this.loadData(); next(); }` in a route component — any `this` reference (property access or bare `this`) inside the guard body.

Common situations: Copy-pasting logic from `beforeRouteUpdate`/`beforeRouteLeave` (where `this` is valid) into `beforeRouteEnter`; refactoring mounted-time fetching into route guards; vue-router 3/4 components where the difference between the three guards is not well known.

Related errors

• You should not use an arrow function to define a watcher.
• Props default value factory functions no longer have access
• Change to `throw new TypeError(...)`
• Could not find the reuseWorker option in ${path}
• `VirtualFree` failed during cleanup: {err}

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/5245929587bf7317. Report an issue: GitHub.