vue实现局部页面缓存+返回上一页传参

最新推荐文章于 2024-08-28 00:04:00 发布

专业前端小白

最新推荐文章于 2024-08-28 00:04:00 发布

阅读量2.6k

点赞数

分类专栏： vue 文章标签： vue局部页面缓存 vue页面传参 vue keep-alive

本文链接：https://blog.csdn.net/qq_41756580/article/details/108362029

版权

在Vue开发中，遇到页面状态刷新和参数传递的问题。使用`keep-alive`结合`:include`实现局部页面缓存，动态管理缓存页面。利用`localstorage`进行参数传递，进入和离开页面时设置与读取缓存，确保返回时能获取到参数并保持页面状态。

摘要由CSDN通过智能技术生成

问题说明：

在使用vue开发的过程中难免会遇到这种问题：

1、当我们需要前往另一个页面去做其他操作后，返回上一个页面，上一个页面的状态会被刷新，我们需要让上一个页面的状态保留。

2、当我们返回上一页的时候如何把参数传回上一页。

解决思路：

1、使用keep-alive :include="caches"来实现页面状态的保留，通过动态修改caches来达到局部页面缓存，include会缓存包含的页面。所以你可以将需要缓存的几个页面放在caches中，当退出这几个页面的时候再取消缓存。

2、通过localstorage来达到传参给上一页的目的，在进入页面的时候查询缓存参数是否存在，存在的话，取得参数后清除掉缓存，在进入下个页面的时候再设置好缓存参数。

实现方法：

1,、局部页面缓存，保存页面状态：

<template>
    <div id="app">
        <keep-alive :include="caches">
            <router-view style="height: 100%; min-height:100%;"/>
        </keep-alive>
    </div>
</template>

<script>
export default {
    name: "Layout",
    computed: {
        caches(){
            if(this.$route.path=="/buyOrder" || this.$route.path&#