{"record":{"id":"5245929587bf7317","repo":"oxc-project/oxc","slug":"beforerouteenter-does-not-have-access-to-this","errorCode":null,"errorMessage":"`beforeRouteEnter` does NOT have access to `this` component instance.","messagePattern":"`beforeRouteEnter` does NOT have access to `this` component instance\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"error","filePath":"crates/oxc_linter/src/rules/vue/no_this_in_before_route_enter.rs","lineNumber":18,"sourceCode":"use oxc_ast::{\n    AstKind,\n    ast::{ExportDefaultDeclarationKind, Expression},\n};\nuse oxc_ast_visit::VisitJs;\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::Span;\n\nuse crate::{\n    AstNode,\n    context::LintContext,\n    rule::Rule,\n    utils::{ThisExpressionFinder, find_property},\n};\n\nfn no_this_in_before_route_enter_diagnostic(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"`beforeRouteEnter` does NOT have access to `this` component instance.\")\n        .with_help(\"Use the callback's `vm` parameter instead of `this` in `beforeRouteEnter`.\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoThisInBeforeRouteEnter;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Disallow `this` usage in a `beforeRouteEnter` method.\n    ///\n    /// This rule is only relevant when using `vue-router`.\n    ///\n    /// ### Why is this bad?\n    ///\n    /// Inside a `beforeRouteEnter` method, there is no access to `this`.\n    /// See [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards).","sourceCodeStart":1,"sourceCodeEnd":36,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/vue/no_this_in_before_route_enter.rs#L1-L36","documentation":"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.","triggerScenarios":"Defining `beforeRouteEnter(to, from, next) { this.loadData(); next(); }` in a route component — any `this` reference (property access or bare `this`) inside the guard body.","commonSituations":"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.","solutions":["Access the instance via the next callback: `next(vm => vm.loadData())`.","If no instance access is needed, replace `this` usages with imports or route params (`to.params`).","Consider `beforeRouteUpdate` if the guard only needs to run when navigating between routes that reuse the component.","Re-run oxlint to confirm."],"exampleFix":"// before\nbeforeRouteEnter(to, from, next) {\n  this.loadUser(to.params.id); // no access to `this`\n  next();\n}\n\n// after\nbeforeRouteEnter(to, from, next) {\n  next((vm) => vm.loadUser(to.params.id));\n}","handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Remember the guard order: beforeRouteEnter has no `this`; beforeRouteUpdate/Leave do.","Use `next(vm => ...)` whenever the enter guard needs the instance.","Keep route-param-driven data fetching in the guard via `to.params`, not `this.$route`."],"tags":["vue","vue-router","lint","navigation-guards","this-binding"],"backgroundTag":"vue-router-guard-context","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}