我正在为一个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)
})
我应该做什么来代替这个?
1条答案
按热度按时间dkqlctbz1#
因为导航是异步的。你必须使用
router.isReady()
(一个promise函数)来等待vue路由器初始化完成。查看更多:Vue路由器isReady,替换为isReady