VUE 3 Router does not see GET parameters

[Ybelyavsky]

Reproduction

https://app.ronbel.ru/poisk_korobok?length=200&width=100&height=100#/

Steps to reproduce the bug

Follow the link

Expected behavior

The router gets get parameters

Actual behavior

The router is empty

Additional information

`<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>

const app = Vue.createApp({
data () {
return {
// Data from the form
length: this.$route.query.length, // empty
}
},
// I thought that in VUE 2 the router was added as a property, but here at the end after creating the object
mounted: function () {
// empty
this.length = this.$route.query.length;
this.width = this.$route.query.width;
this.height = this.$route.query.height;
}
},
});

// VueRouter
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(), // There used to be a mode: history, I think this is its newer counterpart.
routes: []
});

app.use(router);
app.mount('#app');`

[posva]

This is because all navigations are async, you need to wait for the router to be ready: https://router.vuejs.org/guide/migration/#All-navigations-are-now-always-asynchronous

async mounted() {
  await this.$router.isReady()
  this.$route.query.length
}

In your case you should just use a computed instead of setting it in data:

computed: {
  length() {
    return this.$route.query.length
  }
}

That way, the variable will update whenever it's ready