如何在vue.js的component mounted()中访问路由查询参数?

dy1byipe  于 2023-10-23  发布在  Vue.js
关注(0)|答案(1)|浏览(107)

我正在为一个vue.js项目构建一个LeafletMap组件,我希望Map组件基于路线的查询参数(pos和z,用于位置和缩放)进行定位。
但是,当我尝试访问mounted()内部的$route时,我什么也得不到。我使用了$nextTick(),并将Map的定位延迟了100毫秒。
这意味着

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

输出

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

即使URL读作http://localhost:3000/index.html#/map?pos=123.81591796875001,6.577303118123887&z=5
像下面这样的延迟工作正常,但感觉不对:

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

我应该做什么来代替这个?

dkqlctbz

dkqlctbz1#

因为导航是异步的。你必须使用router.isReady()(一个promise函数)来等待vue路由器初始化完成。
查看更多:Vue路由器isReady,替换为isReady

相关问题