How do I access route query params in component mounted() in vue.js?

Question

I am building a Leaflet map component for a vue.js project, and I would like the map component to be positioned based on the route's query params (pos and z, for position and zoom).

However, when I try to access $route inside mounted() I get nothing. I have resorted to using $nextTick() and delaying the positioning of the map by 100 milliseconds.

This means that

mounted: function(){
    console.log(this.$route);
}

outputs

Object { name: null, meta: {}, path: "/", hash: "", 
         query: {}, params: {}, fullPath: "/", 
         matched: [] }

even though the URL reads http://localhost:3000/index.html#/map?pos=123.81591796875001,6.577303118123887&z=5

Delaying like this below works ok, but doesn't feel right:

var mapEl = L.map(this.$refs.map, opts)
this.$nextTick(function () {
    var c = this;
    setTimeout(function(){
        mapEl.setView(
            (c.$route.query && c.$route.query.pos ?
                c.$route.query.pos.split(',').reverse() : false)
                ||
                c.$props.center
                || [0, 0],
            c.$route.query.z || c.$props.zoom || 1)
        }, 100)
})

What should I do instead of this?

@GhaziBenDahmane - accessing the route after some time is not a problem: the problem is that at the beginning of mounted() the route seems to be empty. After 100 ms everythings's ok - see the setTimeout() workaround. But I don't understand why, and if that's the right thing. — simone
– simone, Commented Feb 17, 2021 at 11:42
@simone this.$route.query in mounted seems to work fine in this codesandbox (demo) — tony19
– tony19, Commented Feb 18, 2021 at 6:00

zxzx1290 · Accepted Answer · 2022-03-24 06:35:38Z

2

It's because the navigation is asynchronous. You have to use router.isReady() (a promise function) to wait for vue router initialization complete.

See more: Vue router isReady、Replaced onReady with isReady

edited Mar 24, 2022 at 6:35

answered Mar 18, 2022 at 2:56

zxzx1290

363 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I access route query params in component mounted() in vue.js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related