Vue-Router: keep-alive实现页面后退不刷新，前进刷新

最新推荐文章于 2021-11-30 09:28:33 发布

H_x

最新推荐文章于 2021-11-30 09:28:33 发布

阅读量1.3k

点赞数 1

分类专栏： JavaScript vue 文章标签： vue 缓存 javascript js

本文链接：https://blog.csdn.net/qq_43650979/article/details/108349826

版权

本文介绍了如何使用Vue-Router的keep-alive特性实现页面缓存，使得从页面B回退到页面A时不刷新，而从其他页面进入A时刷新。通过设置路由元信息、组件内导航守卫和全局路由守卫，精确控制页面的缓存行为，确保在C→A→B→A路径下页面A的缓存得以正确管理。

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

想要实现的效果

当从页面A跳转到页面B后，又从页面B回退到页面A，这时候页面A不再刷新，而是从缓存中读数据；
从除了B以外的页面C前跳转到A页面时，刷新A页面。

实现

方法1

首先在A页面的路由配置中设置keep-alive缓存：

    {
   
      path: '/plan/create',
      name: 'createPlan',
      meta: {
   
        title: '填写周计划',
        allowBack: true,
        keepAlive: true,
      },
    }

然后设置路由视图router-view, 在App.vue中设置：

	<router-view v-wechat-title='$route.meta.title' v-if="!$route.meta.keepAlive"></router-view

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

H_x

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue列表页跳转到详情页返回，页面不刷新保持原来的状态,实现刷新局部数据

cjw_01的博客

02-13

2049

vue 列表跳转返回不刷新

vue使用keep-alive实现从详情页返回时不刷新，从其他页面进入时刷新页面

qq_44915607的博客

08-17

1207

vue使用keep-alive实现从详情页返回时不刷新，从其他页面进入时刷新页面 //App.vue <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"> </router-view> <TabBar v-if="$route.meta.isTabar"></TabBar

1 条评论您还未登录，请先登录后发表或查看评论

vue单页使用keep-alive页面返回不刷新

热门推荐

leileibrother的博客

02-26

2万+

使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。首先在App.vue页面上有下面一段代码，我们都知道这是页面渲染的地方把这段代码改成如下：

解决vue单页使用keep-alive页面返回不刷新的问题

前端kk的博客

04-14

1万+

使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用<keep-alive>解决这个问题，下面是我的使用心得。<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。首先在App.vue页面上有下面一段代码，我们都知道这是页面...

vue项目实现列表页-详情页返回不刷新，再点其他菜单项返回刷新的需求

weixin_30563319的博客

02-27

1142

　　问题背景：有时候一些列表会有一些跳转的需求，比如跳到详情页、或者是其他相关的页面（比如跳到用户列表去查看用户的相关信息）等，此时再返回列表页，列表页会刷新重置。目前需求就是需要改成如下情况：　　问题1、列表 - 详情页，返回，不刷新重置；　　问题2、再点其他菜单，再返回，需要刷新重置。　　解决思路：　　解决需求自然是想到vue的keep-alive去缓存组件，但是缓存...

vue项目实现返回不刷新、其他菜单进入刷新。keep-alive的用法

weixin_34112181的博客

02-21

1806

项目背景：查询列表进入详情页，返回时列表页不刷新从其他菜单页进入查询列表，列表刷新实现方案一：详情页通过模态窗口展示。方案二：详情页通过跳转，使用keep-alive处理。 1.渲染组件配置 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> &lt...

vue-router：嵌套路由的使用方法

01-21

我们已经学习过了Vue模板的另外定义形式，使用<template></template>。  首页新闻然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...

深入理解vue-router之keep-alive

08-29

深入理解 Vue Router 之 Keep-Alive Keep-Alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。通过使用 Keep-Alive，可以避免组件的重新渲染，从而提高应用程序的性能。在 Vue Router ...

keep-alive-chain:Vue前进刷新，后退不刷新（Forward refresh, back not refresh）

05-12

vue缓存链控制，Vue前进刷新，后退不刷新（Forward refresh, back not refresh） Installation Use $ npm install v-keep-alive-chain // main.js import { mergeBeforeEachHook, VKeepAliveChain } from 'v-keep-...

keep-Alive搭配vue-router实现缓存页面效果的示例代码

10-15

在Vue.js应用中，有时我们需要实现页面的缓存功能，以保持用户在切换页面时的状态。`keep-alive`组件是Vue中用于组件缓存的关键工具，它可以帮助我们避免重复渲染那些需要保持状态的组件。结合`vue-router`，我们...

vue应用 - 5. keep-alive 实现前进刷新后退缓存

qq_35432512的博客

10-22

833

1. 全局监听后退事件设置 isBack 为true // main.js window.onpopstate =function(){ Vue.isBack=true; console.log('页面触发返回按钮', Vue.isBack) } 2. 页面进入设置 isBack 为false // router/index.js router.beforeEach((to, from, next) => { Vue.isBack=false; next(); })

vue中keepAlive的用法[返回页面不刷新]

岁末zzz的博客

06-22

1239

使用vue单页开发项目时遇到一个问题：在列表页进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 1.在app.vue页面中把替换成下图所示： <keep-alive> <router-view v-if="$route.meta.keepLive"></router-view> </keep-alive>

vue缓存页面keepAlive的坑（数据不刷新，只缓存第一次进入的页面数据），强制刷新缓存的页面的方法

weixin_41308436的博客

11-18

6659

需求：A进入B，根据不同id刷新B页面数据，B进入C，C返回B，如果C有操作数据，则返回B后刷新B数据，否则B页面不刷新；第一次尝试 *思路是从C进入B，缓存B，其他页面进入B，不缓存 B页面： beforeRouteLeave(to, from, next) { from.meta.keeplive= false; next(); }, activated(){ //根据$route.meta }, C页面 // 返回上一页路由不刷新问题 beforeRouteLeave

vue单页应用前进刷新后退不刷新如何实现（利用keep-alive）

qq_37899792的博客

09-17

1498

场景如下下面的图片（图1）：后退时，不刷新的页面。（需要保证左侧列表中的active状态）下面的图片（图2）：点击“返回”，返回到上图（图1）所示的页面，此时要保证（图1）的页面不刷新那么如何实现？ step1 在不需要刷新的路由元信息meta中,增加keepAlive:true属性 step2 在App.vue模板中改写<router-vie...

VUE（keep-alive）返回上一页不刷新页面

qq_32615575的博客

09-17

1582

关于页面不刷新keep-alive 在vue中的使用方式方法一（页面只刷新一次，任何页面跳转到这个页面都不刷新）直接在你的router-view 标签外面包一个keep-alive 加include=“组件名称” <keep-alive include="FileList"> <router-view></router-view> </...

vue返回页面不刷新，进入该页面刷新问题

qq_39376013的博客

12-26

3992

vue返回页面不刷新，进入该页面刷新问题在vue项目中，会遇到页面返回不需要刷新，但是进入页面需要刷新的问题。vue提供了keep-alive这个属性可以解决改问题。在路由文件里面，找到该页面，然后加入： meta:{ keepAlive:true, isBack: false }, component: () => import('../pages/d...

vue详情页跳转列表页时列表页不刷新，使用＜keep-alive＞

ZMJ_QQ的博客

11-30

3133

keep-alive 生命周期执行顺序：不使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> destroyed 使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> activated --> deactivated 使用keep-alive，并且再次进入了缓存页面的情况：beforeRouteEnter --&gt.

vue keep-alive(1)：vue router如何保证页面回退页面不刷新

周陆军的博客，分享it技术。

06-30

842

在构建SPA应用时，经常遇到的场景就是列表页面跳转到详情页，但是详情页面回退到列表页面，列表页面有重新刷新了。如何保证回退的时候不刷新页面呢？keep-alive是一个非常好的解决方案（当然你也可以以子路由，以绝对定位形势覆盖上去*_*）。 keep-alive的作用 keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。本篇主要讲keep-alive的用法。 keep-alive用法像Tabs加载动态组件（有的童鞋直接用动态组件取代路由功能—

vue-router-keep-alive-helper:Vue.js