vue/no-this-in-before-route-enter

Disallow this in beforeRouteEnter.

Applies to: JS/TS scripts in Vue SFCs; examples show the relevant Options API or script setup form.

Bad

beforeRouteEnter runs before the component instance is available, so this.load() cannot read that instance.

<script lang="ts">
export default {
  beforeRouteEnter(to, from, next) {
    this.load();
    next();
  },
  methods: { load() {} },
};
</script>

Good

Use the instance passed to the next callback and call vm.load() after the component is created.

<script lang="ts">
export default {
  beforeRouteEnter(to, from, next) {
    next((vm) => vm.load());
  },
  methods: { load() {} },
};
</script>

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  linter: {
    "preset": "incremental",
    "rules": {
      "vue/no-this-in-before-route-enter": "warn"
    }
  },
});

Then run vp run lint.

Related

• Vue rules
• All rules
• Source code