1.路由配置,获取路由列表 2.监听路由变化,获取当前页面的路由名称进行保存或销毁 3.页面name属性声明,声明即缓存 1.路由配置 1.首先配置路由列表 import Router from "vue-router"; import Vue from"vue"; import layout from'@/views/layout/layout'Vue.use(Router); const routersList=[ { path:'/', comp...
keep-alive 是Vue 的内置组件,用于缓存动态组件或路由组件,避免组件被频繁销毁和重建,从而提高性能。 当组件被 keep-alive 包裹后,在路由切换时不会销毁组件,而是将其缓存起来。下次切换回来时,会直接使用缓存,而不是重新渲染。2. keep-alive 基本使用<template> <keep-alive> <router-view /> </keep-alive> ...
1、router.js(路由) //主要部分 meta:{ keepAlive: true} import myDemand from '../views/keep/myDemand.vue' import AboutView from '../views/keep/AboutView.vue' const routes = [ { path: '/myDemand', name: 'myDemand', meta:{ keepAlive: true, }, component: myDemand }, { path:...
正常情况下,组件切换都会将组件置为初始化状态,不会缓存历史数据;如当页面1 中通过触发增加、减少按钮将当前值置为5后,当切换到页面2再切换至页面1,当前值会被重置为0,原有历史数据并没有被缓存下来 而keepAlive 可以在切换时将组件内的原有状态数据进行缓存;使用时只需要将需要缓存的组件外面包裹一层<keepAlive...
<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。当组件在 <keep-alive> 内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行。
1.新增此文件:src\layout\components\MenuMain.vue 2.修改此文件:src\store\modules\tagsView.js (文件路径和名字可能不同,或者搜关键词cachedViews:) cachedViews: ['MenuMain'] 3.修改此文件:src\utils\menu.js (动态路由菜单的地方,搜索关键词{render(c){return c('router-view')}}) ...
当需要缓存时,给相应页面的相应路由myKeepAlive设置为true就行了,不需要缓存时设置为false。 当然,很多需求是前进缓存,后退清除缓存。(这里提供一个简单方法,网上很多都是这样的) //添加全局路由守卫,用来判断页面前进或是后退 router.beforeEach((to, from, next) => { //页面跳转后添加时间戳参数 ...
比如针对 /test 路由对应的 test.vue组件清除缓存,则需 1. 给 test.vue 文件添加 name属性,值为“test” (可自定义为任意字符串) exportdefault{ name:'test', 1. 2. 2. 在 <keep-alive> 上添加 exclude属性 <keep-aliveexclude="test">
},methods: {},beforeRouteLeave(to,from, next) {// 设置下一个路由的 metato.meta.keepAlive=false;// 不缓存// to.meta.keepAlive = true; // 缓存next(); } }; AI代码助手复制代码 补充知识:vue使用keep-alive后watch事件不销毁解决方案 ...