no-this-in-before-route-enter.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/no-this-in-before-route-enter	disallow this usage in a beforeRouteEnter method

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

disallow this usage in a beforeRouteEnter method

• ❗ This rule has not been released yet.

Rule Details

Because lack of this in the beforeRouteEnter (docs). This behavior isn't obvious, so it's pretty easy to make a TypeError. Especially during some refactor.

Bad:

<script>
export default {
  beforeRouteEnter() {
    this.method(); // Uncaught TypeError: Cannot read property 'method' of undefined      
  }   
}
</script>

Bad:

<script>
export default {
  beforeRouteEnter() {
    this.attribute = 42;
  }   
}
</script>

Bad:

<script>
export default {
  beforeRouteEnter() {
    if (this.value === 42) {
        
    }
  }   
}
</script>

Bad:

<script>
export default {
  beforeRouteEnter() {
    this.attribute = this.method();
  }   
}
</script>

Good:

<script>
export default {
  beforeRouteEnter() {
    // anything without this
  }   
}
</script>

Options

Nothing.

When Not To Use It

When vue-router is not installed.

Further Reading

vue-router - in-component-guards

🔍 Implementation

• Rule source
• Test source