通過vue提供的keep-alive減少對服務(wù)器的請求次數(shù)

 <keep-alive>
      <router-view></router-view>
     </keep-alive>

<keep-alive v-if="$route.meta.keepAlive">
      <router-view></router-view>
     </keep-alive>
     <router-view v-if="! $route.meta.keepAlive"></router-view>

 routers:[
        { path: '/home',
          name: home,
          meta:{keepAlive: true}  // 設(shè)置為true表示需要緩存，不設(shè)置或者false表示不需要緩存          }
          ]

  <keep-alive include="a,b">
      <component></component>
     </keep-alive>  
     <keep-alive exclude="c,d">
      <component></component>
     </keep-alive> 

<template>
 <div class="app">
 <keep-alive>
  <router-view></router-view>
 </keep-alive>
 </div>
</template>JavaScript部分：
.....
 created: function () {
  console.log(1)
 },
 mounted: function () {
  console.log(2)
 },
 activated: function () {
  console.log(3)
 },
 deactivated: function () {
  console.log(4)
 }

initData: function () {
  let _this = this;
  _this.fromLocation = JSON.parse(this.$route.query.fromLocation);
  _this.toLocation = JSON.parse(this.$route.query.toLocation);
  _this.activeIndex = parseInt(this.$route.params.activeIndex) || 0;
  _this.policyType = parseInt(this.$route.params.policyType) || 0;
  }, 

let swiperInstance = new Swiper('#swiper', {
 pagination: '.swiper-pagination',
 paginationClickable: false,
 initialSlide: activeIndex,
 onSlideChangeEnd: function (swiper) {
  let _activeIndex = swiper.activeIndex;
  _this.$route.params.activeIndex = _activeIndex;
  // $router我放到了window上方便調(diào)用
  window.$router.replace({
   name: _this.$route.name,
   params: _this.$route.params,
   query: _this.$route.query
  });
  // 根據(jù)activeIndex，在這里初始化下面顯示的數(shù)據(jù)
  _this.transferDetail = _this.allData.plans[_activeIndex].segments;
  _this.clearBusDetailFoldState();
 }
});

export default {
 name: 'transferMap',
 data: function () {
  return {
   map: null,
  }
 },
 methods: {
  initData: function () {},
  searchTransfer: function (type) {},
  // 地圖渲染 這個在transfer-map.html中使用
  renderTransferMap: function (transferMap) {}
 },
 mounted: function () {
  this.map = new AMap.Map("container", {
   showBuildingBlock: true,
   animateEnable: true,
   resizeEnable: true,
   zoom: 12 //地圖顯示的縮放級別
  });
 },
 activated: function () {
  let _this = this;
  _this.initData();
  // 設(shè)置title
  setDocumentTitle('換乘地圖');
  _this.searchTransfer(_this.policyType).then(function (result) {
   // 數(shù)據(jù)加載完成
   // 換乘地圖頁面
   let transferMap = result.plans[_this.activeIndex];
   transferMap.origin = result.origin;
   transferMap.destination = result.destination;
   // 填數(shù)據(jù)
   _this.transferMap = transferMap;
   // 地圖渲染
   _this.renderTransferMap(transferMap);
  });
 },
 deactivated: function () {
  // 清理地圖之前的標記
  this.map.clearMap();
 },
}

function setDocumentTitle(title) {
 "use strict";
 //以下代碼可以解決以上問題，不依賴jq
 setTimeout(function () {
  //利用iframe的onload事件刷新頁面
  document.title = title;
  var iframe = document.createElement('iframe');
  iframe.src = '/favicon.ico'; // 必須
  iframe.style.visibility = 'hidden';
  iframe.style.width = '1px';
  iframe.style.height = '1px';
  iframe.onload = function () {
   setTimeout(function () {
    document.body.removeChild(iframe);
   }, 0);
  };
  document.body.appendChild(iframe);
 }, 0);
}

function setDocumentTitle(title) {
 //需要jQuery
 var $body = $('body');
 document.title = title;
 // hack在微信等webview中無法修改document.title的情況
 var $iframe = $('<iframe src="/favicon.ico"></iframe>');
 $iframe.on('load', function () {
  setTimeout(function () {
   $iframe.off('load').remove();
  }, 0);
 }).appendTo($body);
}