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
      }
    }
  • 相关阅读:
    rest framework 认证 权限 频率
    rest framework 视图,路由
    rest framework 序列化
    10.3 Vue 路由系统
    10.4 Vue 父子传值
    10.2 Vue 环境安装
    10.1 ES6 的新增特性以及简单语法
    Django 跨域请求处理
    20190827 On Java8 第十四章 流式编程
    20190825 On Java8 第十三章 函数式编程
  • 原文地址:https://www.cnblogs.com/chenhaiyun/p/15771617.html
Copyright © 2011-2022 走看看