vue返回上一页不刷新页面的方法 / vue缓存页面

问题：

vue框架下，在返回上一页的时候（this.$router.go(-1）) ，默认会让上个页面重新执行一遍生命周期（即被刷新了）。

想达到的效果：

返回上一页不刷新页面。

解决方法：

缓存上一页的页面，让其在已经存在的情况下，再次显示时不重新执行生命周期；

使用技术：keep-alive（vue的内置组件）

router路由配置router/index.js

const routes = [{path: '/pageA',name: 'pageA',component: () => import('../views/pageA.vue'),meta: {title: '我是页面A',keepAlive: false // 不需要缓存}},{path: '/pageB',name: 'pageB',component: () => import('../views/pageB.vue'),meta: {title: '我的页面B',keepAlive: true // 需要缓存}}]const router = new VueRouter({routes
})Vue.use(VueRouter)

template模板代码 (分发路由的页面)：

<template><div id="app"><!-- 缓存的页面，缓存$route.meta.keepAlive为true的组件 --><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 不缓存的页面，不缓存$route.meta.keepAlive为false的组件 --><router-view v-if="!$route.meta.keepAlive"></router-view></div>
</template>

说明：被keep-alive包裹的动态组件（页面），在组件不活动时，会缓存它们的组件实例，而不是销毁它们。

注意（增加的钩子函数）：

缓存页面多出两个钩子函数，用于显示和隐藏该缓存的页面时触发

// activated是页面激活后的钩子函数，一进页面就会触发activated () {// 显示时console.log(1)},// deactivated 离开页面的钩子函数，一离开页面就会触发deactivated () {// 不显示时console.log(2)},

vue返回上一页不刷新页面的方法 / vue缓存页面相关推荐

VUE 返回上一页不刷新页面、重复进入同一页面created重复执行、每次进入页面时都执行created、vue单页面多路由，前进刷新，返回不刷新
每次进入页面时都执行created.前进刷新,返回不刷新思路: 利用 keep-alive与vue-router配合使用 ,判断哪些页面需要每次进入刷新,哪些页面不需要每次进入刷新: keepAli ...
vue返回上一页并不刷新
vue返回上一页并不刷新 vue返回上一页并不刷新 1.首先添加在主页面添加keep-alive <keep-alive ><router-view :key="key&q ...
html页面中使用 JS 返回上一页及返回上一页并刷新，iframe中打开指定页面，跳转到指定页面
html页面中使用 JS 返回上一页及返回上一页并刷新,iframe中打开指定页面,跳转到指定页面. 常用方法: window.history.go(-1); //返回上一页 window.histo ...
VUE 返回上一页不刷新页面
网上有很多种方法,刚开始看的时候都感觉莫名奇妙.不知道他们说啥,理解能力有限,我梳理了一下. 这里我介绍的主要是两种缓存某个页面的方法fang 方法一(页面只刷新一次,任何页面跳转到这个页面都不刷新) ...
vue返回上一页不刷新页面
项目需求:由于公司产品较多页面加载相对慢,所以每次进行页面的刷新影响客户下单的效率. 1.首先对router.js进行操作 import indexOne from '@/components/ind ...
vue返回上一页并刷新上一页数据
activated() {//调用列表函数this.getGoodsSourceList() },
Vue 返回上一页页面不刷新
Vue 返回上一页页面不刷新场景:首页点进列表页时要刷新数据,信息页返回列表页时不刷新数据首先在router.js中配置 {path: '/home',name: 'home',meta: {ti ...
js返回上一页和刷新页面
返回上一页 window.history.go(-1);//返回上一页不刷新 window.history.back(); //返回上一页只是单纯的返回到上一页 window.location.hr ...
js实现返回上一页后刷新历史页面
<input type="button" value="返回" οnclick="javascript:window.location.repl ...

vue返回上一页不刷新页面的方法 / vue缓存页面

问题：

想达到的效果：

解决方法：

使用技术：keep-alive（vue的内置组件）

router路由配置router/index.js

template模板代码 (分发路由的页面)：

注意（增加的钩子函数）：

vue返回上一页不刷新页面的方法 / vue缓存页面相关推荐

最新文章

热门文章