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-16 17:13:34

    iOS优秀Objective-C开源库集锦

    自己从事iOS开发工作接近两年左右的时间了，在自己工作之余，收集整理了一些优秀的三方开源框架，自己整理的这些三方开源库涵盖了iOS开发面很多方面的知识。非常感谢这些开源库的作者们，正是因为这些库，提高了我们的开发效率，同样也是我们学习进步的源泉。现将这个整理工程文件分享出来，希望能给需要的朋友一些帮助，同时也自己也做下收集记录。

  • 2020-02-19 23:04:52

    理解Laravel中的pipeline

    pipeline在laravel的启动过程中出现次数很多，要了解laravel的启动过程和生命周期，理解pipeline就是其中的一个关键点。网上对pipeline的讲解很少，所以我自己写一写吧。

  • 2020-02-19 23:08:56

    Laravel 用户认证 Auth（精华）

    很多应用是需要登陆后才能操作，Laravel 提供了一个 auth 工具来实现用户的认证功能。并且有一个 config/auth.php 来配置 auth 工具。大概看一下 auth 工具的常用方法

  • 2020-02-19 23:12:44

    Laravel 从 $request 到 $response 的过程解析二（必读）

    laravel 的请求会组装成 $request 对象，然后会依次经过中间件（前置部分），最终到达 url 指向的控制器方法，然后把返回数据组装为 $response 对象返回，再依次经过中间件 (后置部分)，最终返回。