vue.js - vue-router和高德地图会被覆盖页面

问题描述

问 题

用vue和vue-router做单页面应用，其中一个/Map页面是用的高德地图，
当首页用/Map的时候，点击切换进其他页面的时候，/Map会成为背景，造成两个页面覆盖，
但是用其他页面如/Message作为首页，切换到/Map或从/Map切换到其他页面就没有问题，但是如果在/Map页面进行刷新，再切换到其他页面还是会造成页面的覆盖

---

正常的应该是

路由

router.map({
  '/map': {
    name: 'index',
    component: Map
  },
  '/': {
    name: 'index',
    component: Message
  },
  '/friends': {
    name: 'friends',
    component: Friends
  },
  '/contacts': {
    name: 'contacts',
    component: Contacts
  },
  '/message': {
    name: 'message',
    component: Message
  }
})

---

补充。。
当刷新/map页或者/页面作为首页加载的时候，切换到其他页面<rouert-view>里面会同时出现这两个页面，而不加载/map页面或者不以/map作为首页的时候，是正常的一个页面

真的是好奇怪的事情

解决方案

应该是高德地图初始化的时候生成了一些 DOM 元素脱离了 Vue.js 的控制。

高德地图的 map 应该有 init 和 destroy 方法（不一定叫这个名字）吧，在路由切换时，如果不是地图路由，把地图 destroy 掉，进入地图路由的时候再 init。

如果没有 destroy，或者希望切换回地图路由时保持地图的状态，那就把地图显示、隐藏。

这篇关于vue.js - vue-router和高德地图会被覆盖页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！