vue-amap 「Cannot read property 'Ac' of null」

問題產生的場景

咱們在項目中引入了vue-amap組件,我在每一個標記點上綁定了點擊事件,以下:vue

let markerAlarm = {
          position: [lon, lat],
          visible: true,
          draggable: false,
          name: name,
          animation: "AMAP_ANIMATION_BOUNCE", // 標記點動畫效果
          icon: "/images/alarm.png",
          events: {
              init(o) {
                  self.markerRefs.push(o);
              },
              click: () => {
                  self.windows = {
                      enterprise_id: data[i].enterprise_id,
                      position: [lon, lat],
                      content: name,
                      visible: true,
                      size: 100,
                      events: {
                          close: () => {
                              self.windows.visible = false;
                          }
                      }
                  };
                  let crumbArray = [
                      {
                          url: "/move",
                          name: "移動執法"
                      },
                      {
                          url: "",
                          name: "企業詳情"
                      }
                  ];
                  self.$router.push({
                      name: "enterpriseDetail",
                      query: {
                          enterpriseId: self.windows.enterprise_id,
                          crumbArray: crumbArray
                      }                                      
                  });
                  console.log(self.windows, "231423");
              }
          }
      };
複製代碼

能夠看到,我綁定了點擊事件,每當點擊圖標的時候,就利用vue-router跳轉到對應的路由下面。 每次點擊以後,正常跳轉,可是在瀏覽器控制檯報錯以下:vue-router

Uncaught TypeError: Cannot read property 'Ac' of null
複製代碼

解決辦法

給對應路由添加keep-alive屬性。例如個人地圖組件名稱爲move,那麼在對應的路由文件處配置以下:windows

{
   path: '/move',
   component: Move,
   meta: {
       keepAlive: true // 標記列表頁須要被緩存
   }
}
複製代碼

而後在router-view處判斷是否有keep-alive屬性便可:瀏覽器

<keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>
複製代碼
相關文章
相關標籤/搜索