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
clipboard.png
Xnip2018-12-29_22-11-58.jpg
clipboard.png
Xnip2018-12-29_22-12-39.jpg
clipboard.png

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>

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),

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2b45f-2b2d4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2b45f-2b2d4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?