新编asp.net 2.0网站开发从入门到精通 代码,开发出来的电子商务网站域名,网站如何添加统计代码是什么,河北省建设厅网站登陆设置1-KeepAlive Vue默认切换标签页时每次都重新请求数据 1-1.作用 使用keep-alive当组件被切换时#xff0c;不会被销毁和重新创建#xff0c;而是保留在内存中 1-2.使用 在Vue2中#xff0c;keep-alive默认会尝试缓存它直接包裹的动态子组件#xff0c;以下是多种写法…1-KeepAliveVue默认切换标签页时每次都重新请求数据1-1.作用使用keep-alive当组件被切换时不会被销毁和重新创建而是保留在内存中1-2.使用在Vue2中keep-alive默认会尝试缓存它直接包裹的动态子组件以下是多种写法!-- 基础用法 --keep-alivecomponent:iscurrentComponent/component/keep-alive!-- 路由中使用常用 --keep-aliverouter-view/router-view/keep-alive!-- 只缓存特定组件常用include内部是 组件自身的name --!-- PSinclude内部是 组件自身的name,即下方的name Vue组件暴露出的name export default { name: Profile } --keep-aliveincludeUserProfile,OrderListrouter-view/router-view/keep-alive!-- 排除特定组件 --keep-aliveexcludeLogin,Registerrouter-view/router-view/keep-alive!-- 最多缓存 10 个组件实例 --keep-alive:max10router-view/router-view/keep-alive被keep-alive直接包裹的、动态切换的、有name的组件才会被真正缓存2-文件调整新增frontend-vue2\src\components\TagsView.vuetemplatedivclasstabs-view-containerdivv-foritem in visitedViews:keyitem.pathclasstab-item:class{ active: $route.path item.path }clickgo(item.path)spanclasstab-title{{ item.title }}/spanspanv-if!item.affixclasstab-closeclick.stopclose(item.path)×/span/div/div/templatescriptexportdefault{name:TagsView,computed:{visitedViews(){returnthis.$store.getters[tags/visitedViews];},},methods:{go(path){// 相同路径则不处理if(this.$route.pathpath)return;this.$router.push(path);},close(path){constviewsthis.visitedViews;constindexviews.findIndex((v)v.pathpath);this.$store.commit(tags/REMOVE_VIEW,path);if(this.$route.pathpath){constnextviews[index1]||views[index-1];this.$router.push(next?next.path:/);}},},};/scriptstylescoped.tabs-view-container{display:flex;align-items:center;background-color:#fff;border-bottom:1px solid #e6e6e6;padding:0 10px;height:35px;overflow-x:auto;}.tab-item{display:flex;align-items:center;height:26px;padding:0 10px;margin-right:6px;background:#f5f5f5;border-radius:4px;cursor:pointer;font-size:14px;white-space:nowrap;user-select:none;}.tab-item:hover{background:#e6f7ff;}.tab-item.active{background:#409eff;color:#fff;}.tab-title{margin-right:6px;}.tab-close{font-size:12px;opacity:0.6;}.tab-close:hover{opacity:1;}/style新增frontend-vue2\src\store\modules\tags.js// 这是一个 Vuex 模块用于管理页面标签类似浏览器标签页的功能// 页面刷新时从 localStorage 里恢复tab状态constsavedStateJSON.parse(localStorage.getItem(tagsView)||{});// 定义状态state- 存储应用的数据conststate{// 用来存储用户访问过的页面信息的数组visitedViews:savedState.visitedViews||[],// 存储需要缓存的组件名称cachedViews:savedState.cachedViews||[],};// 定义状态变更的方法mutations- 同步修改状态constmutations{// 添加新的标签页到 visitedViews 数组中ADD_VIEW(state,view){console.log(add-state,state);console.log(add-添加标签页,view);// 检查是否已经存在相同的路径如果存在则直接返回不再添加避免重复if(state.visitedViews.some((v)v.pathview.path))return;// 将新的页面信息添加到数组末尾state.visitedViews.push({path:view.path,// 页面路径如/home、/abouttitle:view.meta.title||未命名,// 页面标题如果路由配置没有标题则显示未命名name:view.name,// 页面名称需要记录组件名称用于缓存affix:view.meta.affix||false,});// 如果组件需要缓存添加到 cachedViewsif(view.meta.cache!falseview.name){if(!state.cachedViews.includes(view.name)){state.cachedViews.push(view.name);}}// 保存到 localStoragelocalStorage.setItem(tagsView,JSON.stringify({visitedViews:state.visitedViews,cachedViews:state.cachedViews,}),);},// 从 visitedViews 数组中移除指定路径的标签页REMOVE_VIEW(state,path){console.log(del-state,state);console.log(del-path,path);// 先找到要删除的viewconstviewToRemovestate.visitedViews.find((v)v.pathpath);// 使用 filter 方法过滤掉要删除的路径返回不匹配的元素组成的新数组state.visitedViewsstate.visitedViews.filter((v){// affix 的不允许删if(v.affix)returntrue;returnv.path!path;});// 从 cachedViews 中移除if(viewToRemoveviewToRemove.name){constindexstate.cachedViews.indexOf(viewToRemove.name);if(index-1){state.cachedViews.splice(index,1);}}// 保存到 localStoragelocalStorage.setItem(tagsView,JSON.stringify({visitedViews:state.visitedViews,cachedViews:state.cachedViews,}),);},// 清除所有标签页REMOVE_VIEW_ALL(state){state.visitedViews[];state.cachedViews[];localStorage.removeItem(tagsView);},};// 定义计算属性gettersconstgetters{// 获取所有访问过的页面列表visitedViews:(state)state.visitedViews,cachedViews:(state)state.cachedViews,};// 导出这个 Vuex 模块的配置exportdefault{// 开启命名空间防止不同模块间的状态冲突namespaced:true,// 注册状态state,// 注册状态变更方法mutations,// 计算属性getters,};修改frontend-vue2\src\store\index.js让Vuex引入tags.jsimportVuefromvue;importVuexfromvuex;// 新增引入标签页管理模块importtagsfrom./modules/tags;// 用户信息管理模块importuserfrom./modules/user;Vue.use(Vuex);// 创建并导出 Vuex store 实例exportdefaultnewVuex.Store({// 模块化配置 - 将 store 分割成不同的模块modules:{// 所有user的commit/dispatch都要加命名空间如 this.$store.dispatch(user/logout);user,tags,// 新增引入tags},});修改frontend-vue2\src\router\index.js在router里边的路由守卫增加Vuex逻辑router.afterEach((to){// 排除登录页 - 不在登录页显示标签页if(to.path!/login){// 每次路由跳转成功后将当前路由信息添加到标签页状态中store.commit(tags/ADD_VIEW,to);}});修改frontend-vue2\src\components\BaseLayout.vueLayout里边加入TagView逻辑templatedivclassapp-wrapper!-- 引入独立的菜单组件 --BaseSidebar/!-- 主体区域 --divclassmain-container!-- 头部 --el-headerclassheader-containerdivclassnavbardivclassbreadcrumb/divdivclassright-menuspanv-ifuserInfo欢迎{{ userInfo.username }}/spanel-buttontypedangersizesmallclicklogoutstylemargin-left:20px退出登录/el-button/div/div/el-header!-- 标签页视图区域 --TagsView/!-- 内容区域 --el-mainclassapp-mainkeep-alive:includecachedViewsrouter-view//keep-alive/el-main/div/div/templatescriptimportBaseSidebarfrom./BaseSidebar.vue;// 引入 TagsView 组件importTagsViewfrom./TagsView.vue;exportdefault{name:BaseLayout,components:{BaseSidebar,TagsView},computed:{userInfo(){returnthis.$store.getters[user/userInfo];},// 需要缓存的组件名称列表cachedViews(){returnthis.$store.getters[tags/cachedViews];},// 使用路由路径作为key确保路由变化时重新渲染key(){returnthis.$route.path;},},methods:{logout(){this.$store.dispatch(user/logout);// 清除所有缓存页面TAGSthis.$store.commit(tags/REMOVE_VIEW_ALL);// 页面跳转loginthis.$router.push(/login);},},};/scriptstylescoped.app-wrapper{display:flex;height:100vh;width:100%;overflow:hidden;}.main-container{flex:1;display:flex;flex-direction:column;overflow:hidden;}.header-container{background-color:#fff;box-shadow:0 1px 4pxrgba(0,21,41,0.08);padding:0;height:60px;line-height:60px;position:relative;}.navbar{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 20px;}.right-menu{display:flex;align-items:center;}.app-main{flex:1;padding:20px;overflow:auto;background-color:#f0f2f5;}/style总结修改文件主要改动内容目的 / 作用新增TagsView.vue纯展示 交互组件渲染标签列表、点击切换、关闭标签×标签的可视化呈现与基本交互新增store/modules/tags.jsVuex module管理 visitedViews / cachedViews包含增/删/全清持久化到 localStorage核心状态管理 页面刷新后标签不丢失修改store/index.js引入并注册tags模块带命名空间让全局可以访问this.$store.tags/...修改router/index.jsafterEach守卫里提交tags/ADD_VIEW每次路由成功跳转 → 自动添加/更新标签修改BaseLayout.vue1. 引入并使用TagsView /2.keep-alive :includecachedViews3. logout 时清空所有 tags把标签栏放在 header 下方 实现页面缓存 退出登录时清理状态路由 meta 字段约定隐含需要使用meta: { title, affix?, cache? }控制标题、是否固定、是否缓存效果