noVueThisInBeforeRouteEnter (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueThisInBeforeRouteEnter
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-this-in-before-route-enter

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueThisInBeforeRouteEnter": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow this in the beforeRouteEnter navigation guard of a Vue component.

Vue Router calls beforeRouteEnter before it creates the component, so the component doesn’t exist yet and this is undefined. Reading a property through this, such as this.loadUser(), throws a TypeError when the user navigates to the page.

To use the component, pass a callback to next. Vue Router calls it with the component once the navigation is confirmed.

The rule checks beforeRouteEnter when it is written as a method or a function expression, in export default {}, defineComponent(), createApp(), and defineOptions() in <script setup>.

Examples

Invalid

1
<script>
2
export default {
3
  beforeRouteEnter(to, from, next) {
4
    this.loadUser(to.params.id);
5
    next();
6
  },
7
};
8
</script>

code-block.vue:4:5 lint/nursery/noVueThisInBeforeRouteEnter ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ this is used in beforeRouteEnter, where it is undefined.
  
    2 │ export default {
    3 │   beforeRouteEnter(to, from, next) {
  > 4 │     this.loadUser(to.params.id);
      │     ^^^^
    5 │     next();
    6 │   },
  
  ℹ Vue Router calls beforeRouteEnter before it creates the component, so the component can't be reached through this.
  
  ℹ Pass a callback to next to use the component once it is created, for example next((vm) => vm.loadData()).
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script>
2
export default {
3
  beforeRouteEnter(to, from, next) {
4
    next((vm) => {
5
      vm.loadUser(to.params.id);
6
    });
7
  },
8
  beforeRouteUpdate(to) {
9
    this.loadUser(to.params.id);
10
  },
11
};
12
</script>