zoukankan      html  css  js  c++  java
  • vue系列【vue路由$route.go(1)返回使用KeepAlive保持原页面数据不更新】

    场景:开发vue页面中,a页面有form表单 可以选择数据,之后点击第一条数据就跳转到b页面 ,然后再从b页面返回原来的页面,要实现原来的页面form数据保持不变 ,这里返回用的是@click="$router.go(-1)"

    解决思路:在路由入口处包裹一层<keep-alive></keep-alive>,然后找到路由文件,找到你需要缓存的路由,在meta传keepAline值

    代码展示:
    1.路由入口文件 app.vue

    <template>
      <div id="app">
        <!-- 需要缓存的组件入口 -->
        <!-- keepAlive是从路由传过来的 -->
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <!-- 不需要缓存的组件入口 -->
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </template>


    2.路由文件

    {
      path: 'profile',
      component: () => import(@/view/profile.vue)
      name: 'Profile',
      meta: {
        name:profile
        keepAlice:true // 需要缓存传true 不需要可以传false或者不写keepAlice
      }
    }
  • 相关阅读:
    (转) IOS ASI http 框架详解
    不是技术牛人 如何拿到IT巨头的Offer 来自作者: lsldd 来源: CSDN
    数据类型Block 粗解
    GCD的基本思想
    自定义Cell的 两种方法!
    全世界最幸运的我
    实现鸢尾花数据的读入
    Tensorflow2的基本用法
    6.17
    6.16
  • 原文地址:https://www.cnblogs.com/chenhaiyun/p/15771617.html
Copyright © 2011-2022 走看看