When vue references the attributes of this.$route in data, it will cause the loss of this.$options.data ().

vue will cause the loss of this.$options.data () after referencing the attribute of this.$route within data

For the

question, please see the following three pictures. You also have this problem in your own project, and then use Vue CLI 3 to build a new project. All the creation options are default, and only vue-router is installed. Is this my usage problem or the bug of vue-router ?
Xnip2018-12-29022-11-05.jpg

Xnip2018-12-29_22-11-58.jpg

Xnip2018-12-29_22-12-39.jpg

Code

<template>
  <div style="text-align:center">
    <input type="button"
           @click="getData"
           value="">
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      a: 1,
      b: this.$route
    }
  },
  methods: {
    getData() {
      return this.a
    }
  }
}
</script>

Vue-router front-end-framework front-end vue.js

Apr.16,2022

Test the following code:

data() {
      return {
        a: 1,
        b:router.options.routes
      }
    },

console.log (this.$options.data ());
print result
{a: 1, b: Array (5)}

bookId: parseInt (this.$route.params.id),

Previous: Multidimensional array traversal to get all id

Next: How to query the AppleShowAllFiles status of com.apple.Finder?