zoukankan      html  css  js  c++  java
  • vue keep-alive保存路由状态1 (接下篇)

    本文很长,但是很详细,请耐心看完就一目了然了有下篇

    keep-alive 是 Vue 内置的一个组件,使被包含的组件保留状态,或避免重新渲染。

    1. 基础用法,缓存所有路由:

    <keep-alive>
      <router-view>
        <!-- 这里是会被缓存所有的视图组件 -->
      </router-view>
    </keep-alive>

    如果想要单一缓存一个怎么办呢?看下面

    2. 初级用法,缓存指定路由:

        vue 2.1.0后提供了include/exclude两个属性: 下图为官方用法:

          include - 字符串或正则表达,只有匹配的组件会被缓存

          exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存

         

    // 组件 a
    export default {
      name: 'a',//先定义好组件名字 才能被缓存
      data () {
        return {}
      }
    }
    <keep-alive include="a,b">
      <router-view>
        <!-- name 为 a以及b 的组件将被缓存! -->
      </router-view>
    </keep-alive>
    <keep-alive exclude="a"> <router-view> <!-- 除了 name 为 a 的组件都将被缓存! --> </router-view> </keep-alive>

    3. 进阶用法,结合vue-router 缓存指定路由:这里包含两个用法方式,也可以一块用,看个人习惯了,我偏向用 路由meta控制

    方式1:路由表meta + 公共main组件判断

    //修改1.在路由表js  增加 router.meta 属性
    // routes 配置
    export default [
      {
        path: '/home',
        name: 'home',
        component: Home,
        meta: {
          keepAlive: true // 需要被缓存
        }
      }, {
        path: '/edit,
        name: 'edit',
        component: Edit,
        meta: {
          keepAlive: false // 不需要被缓存
        }
      }
    ]
    //修改2.在公共main组件修改 下面是组件里的代码
    <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里加载会被缓存的视图组件,比如 Home! --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 这里加载不被缓存的视图组件,比如 Edit! --> </router-view>
    //修改3.在

    方式2:路由表meta + 组件内设置name属性

    //修改1.在路由表js  增加 router.meta 属性
        // routes 配置
        export default [
        {
            path: '/home',
            name: 'home',
            component: Home,
            meta: {
            keepAlive: true // 需要被缓存
            }
        }, {
            path: '/edit,
            name: 'edit',
            component: Edit,
            meta: {
            keepAlive: false // 不需要被缓存
            }
        }
        ]
    //修改2.在要缓存的组件 设置那么属性
      // 组件 a
      export default {
      name: 'home',//先定义好组件名字 才能被缓存
        data () {
          return {}
        }
      }

    4.高级用法,指定从什么组件进入才缓存,以及销毁缓存:先介绍我发现的网上一些博主写的有bug的方法,在介绍自己的方法。

     

    因本文太长请看下篇高级用法
  • 相关阅读:
    php命令注入
    mysql事物
    安装php环境
    移除服务器缓存实例
    show user profile synchronization tools
    manual start user profile import
    JSON is undefined. Infopath Form People Picker in SharePoint 2013
    asp.net web 应用站点支持域账户登录
    Load sharepoint envirement by powershell
    sharepoint 2016 download
  • 原文地址:https://www.cnblogs.com/wangmaoling/p/9803960.html
Copyright © 2011-2022 走看看