咱們在項目中引入了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>
複製代碼