Vue路由开启keep-alive缓存页面

2019-12-14 21:02:45

mode:hash模式下:

HTML部分:

1
2
3
4
5
6
7
8
<template>
  <div id="app">
   <keep-alive>     <!--使用keep-alive会将页面缓存-->
    <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive> 
     <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

 路由部分:

1
2
3
4
5
6
7
8
{
    path: '/home',
    name: '首页',
    menuShow: true,
    iconCls: 'home_light.svg',
    component: Home,
    meta:{keepAlive:true}
}<br>页面部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//缓存页面
beforeRouteLeave(to, from, next) {   
   // 设置下一个路由的 meta
    to.meta.keepAlive = true// B 跳转到 A 时,让 A 缓存,即不刷新(代码写在B页面)
    next();
   }
 
 
 
//不缓存页面
beforeRouteLeave(to, from, next) {   
   // 设置下一个路由的 meta
    to.meta.keepAlive = false// B 跳转到 A 时,让 A 不缓存,即刷新(代码写在B页面)
    next();
   }


  • 2020-02-23 23:27:26

    Nuxt.js 基础入门教程

    Nuxt.js 就是一个极简的 vue 版的 ssr 框架。基于它,我们可以快速开发一个基于 vue 的 ssr 单页面应用。

  • 2020-02-24 18:36:17

    百度地图做电子围栏总结

    需求:在地图上画出围栏,设置围栏信息后保存,生成围栏列表。全选时,地图视野可看到全部的围栏区域,单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。

  • 2020-02-24 18:37:17

    百度地图绘制轨迹点

    没有后台获取事实信息 都是伪数据- -轨迹信息做不到事实导航。 控件可以根据自己的需求添加 位置通过offset:new BMAP.Size(x,y)进行微调 事实路况信息需要通过引没有后台获取事实信息 都是伪数据- -轨迹信息做不到事实导航。 控件可以根据自己的需求添加 位置通过offset:new BMAP.Size(x,y)进行微调 3D视图部分城市没有开放开放 根据需求自己添加

  • 2020-02-24 18:43:54

    百度地图JS关于规划路线偏离预警的解决方式

    说实在的这个解决方案有点low,我并不会很赞成,效率有点低。如果多的话,很是耗费资源。 我推荐使用矩形来解决这个问题,而不是圆形。 当日用矩形的话,就要确保轨迹是折线的,而不是弧线等。

  • 2020-02-24 18:45:33

    巧妙解决百度地图加偏纠偏问题

    所谓的加偏,就是将真实坐标加上一定的偏移量,而这个偏移量又不是线性的,不同地区偏移不一样,但同一地区偏移量却差不多,因此,有人就使用了个暴力破解的方法,

  • 2020-02-24 18:48:34

    规划驾车路线和途径点及判断车辆路线偏移

    项目需求需要利用百度地图构建路线并支持设置途径点,以及可以实时监控车辆是否偏移路线;两种方案。 写了比较完整的注释了,替换ak可直接看效果,规划驾车路线和途径点及判断车辆路线偏移

  • 2020-02-25 15:15:56

    nuxtjs全栈

    Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 要在页面之间使用路由,我们建议使用<nuxt-link> 标签。