缓存id路由页面返回,历史路由栈

功能需求

网页端需要做页面数据缓存(vue动态路由数据缓存),可根据id值打开多个编辑详情页,需要在页面操作返回时关闭面包屑页签

隐藏问题

1.页面缓存会有初始化和组件激活访问生命周期调用数据接口过多,有性能损耗
2.使用this.$router.back()返回是返回上一个历史路由,如果打开多个id详情页,并反复在两个详情页做切换操作,会导致在操作返回时看起来像是在详情页反复切换数据关闭不了,如下图



解决

1.缓存页组件初始化(created)和组件激活访问(activated)生命周期只执行一次,使用变量状态,在进入方法时判断变量是否return,在接口完成(finally)更改变量

2.路由历史栈,在路由守卫router.beforeEachstore存储from历史路由,在标题组件返回方法里,对历史路由栈数据进行操作,获取历史有效路由使用this.$router.replace跳转

javascript 复制代码
//在面包屑页签组件初始化时调用addTags方法存储访问路由
addTags() {
  const { name } = this.$route
  if (name) {
    this.$store.dispatch('tagsView/addView', this.$route)
  }
},


//在权限管理路由守卫里存储历史访问路由
import store from './store'
router.beforeEach(async (to, from, next) => {
  ...
  store.commit('tagsView/ADD_ROUTER_HISTORY', from.path);
  ...
}

tagsView.js文件

javascript 复制代码
const state = {
  visitedViews: [],
  cachedViews: [],
  routeHistory: [],
  closedRoutes: [],
  validHistory:[],
  lastValidRoute:''
}
const mutations = {
  ADD_ROUTER_HISTORY: (state, path) => {
    state.routeHistory.push(path);
  },
  CLOSE_ROUTER(state, route) {
    state.closedRoutes.push(route);
    // 生成过滤后的有效历史栈
    state.validHistory = state.routeHistory.filter(item => !state.closedRoutes.includes(item))

    if (state.cachedViews.length===0) {
      //首页
      state.lastValidRoute = '/'  
    }else{
      //历史有效路由
      state.lastValidRoute = state.validHistory[state.validHistory.length - 1];  
    }
  },
  ADD_VISITED_VIEW: (state, view) => {
    if (state.visitedViews.some(v => v.path === view.path)) return
    state.visitedViews.push(
      Object.assign({}, view, {
        title: view.meta.title || 'no-name'
      })
    )
  },
  ADD_CACHED_VIEW: (state, view) => {
    if (state.cachedViews.includes(view.name)) return
    if (!view.meta.noCache) {
      state.cachedViews.push(view.name)
    }
    console.log(state.cachedViews)
  }
}
const actions = {
  addView({ dispatch }, view) {
    dispatch('addVisitedView', view)
    dispatch('addCachedView', view)
  },
  addVisitedView({ commit }, view) {
    commit('ADD_VISITED_VIEW', view)
  },
  addCachedView({ commit }, view) {
    commit('ADD_CACHED_VIEW', view)
  },
  delView({ dispatch, state }, view) {
    return new Promise(resolve => {
      dispatch('delVisitedView', view)
      dispatch('delCachedView', view)
      resolve({
        visitedViews: [...state.visitedViews],
        cachedViews: [...state.cachedViews],
      })
    })
  },
  delVisitedView({ commit, state }, view) {
    return new Promise(resolve => {
      commit('DEL_VISITED_VIEW', view)
      resolve([...state.visitedViews])
    })
  },
  delCachedView({ commit, state }, view) {
    return new Promise(resolve => {
      commit('DEL_CACHED_VIEW', view)
      resolve([...state.cachedViews])
    })
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

标题组件layout-header.vue文件返回方法里应用

html 复制代码
<template>
  <div class="layout-header">
    <div class="back" v-if="back" @click="handleBack">
      <img src="@/assets/images/back-icon.png"/>
    </div>
    <div class="layout-title" :style="'font-size:' + fontSize + 'px' ">{{title}}</div>
    <slot></slot>
  </div>
</template>
javascript 复制代码
<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    back: {
      type: Boolean,
      default: false
    },
    fontSize: {
      type: Number,
      default: 18
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleBack(){
      let path = this.$route.path
      //存入当前路由
      this.$store.commit('tagsView/ADD_ROUTER_HISTORY', path);
      const visitedViews=this.$store.state.tagsView.visitedViews
      let view = visitedViews.find(v => v.path === path)
      //计算路由历史栈及访问路由
      this.$store.commit('tagsView/CLOSE_ROUTER', path);
      this.$store.dispatch('tagsView/delView', view)
      // 获取最近有效路由并跳转
      const target = this.$store.state.tagsView.lastValidRoute
      this.$router.replace(`${target}`);
    }
  }
}
</script>
相关推荐
上单带刀不带妹5 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
CodeWithMe2 小时前
【Note】《深入理解Linux内核》 Chapter 15 :深入理解 Linux 页缓存
linux·spring·缓存
叹一曲当时只道是寻常2 小时前
vue中添加原生右键菜单
javascript·vue.js
大春儿的试验田4 小时前
高并发收藏功能设计:Redis异步同步与定时补偿机制详解
java·数据库·redis·学习·缓存
likeGhee4 小时前
python缓存装饰器实现方案
开发语言·python·缓存
C182981825754 小时前
OOM电商系统订单缓存泄漏,这是泄漏还是溢出
java·spring·缓存
markyankee1015 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
khalil5 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js