若依删除从详情页面返回删除详情页面tab显示列表页tab

最新推荐文章于 2024-08-16 10:01:20 发布

xym100111100

最新推荐文章于 2024-08-16 10:01:20 发布

阅读量1.4k

点赞数 1

分类专栏：前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/xym100111100/article/details/119060446

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用Vuex库来管理用户的浏览历史，通过添加mutations和actions实现添加、删除操作，并在全局方法中调用。通过实例展示了如何在列表页保存上一页面路由，在详情页返回上一个浏览记录。

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

src\store\modules\tagsView.js

  	1:添加store  
  	      lastView: []
  	2：添加mutations
  	  SET_LAST_VIEW: (state, view) => {
  	    if(state.lastView.length == 0 ){
  	      state.lastView.push(view)
  	    }else if ( view.path != state.lastView[state.lastView.length - 1].path) {
  	      state.lastView.push(view)
  	    }
  	  },
  	  DEL_LAST_VIEW: (state) => {
  	    state.lastView.pop()
  	  }
   3：添加actions
      delLastView({ commit, state }, router) {
  	    if (state.lastView.length > 0) {
  	      router.push({
  	        path: state.lastView[state.lastView.length - 1].path
  	      })
  	      commit('DEL_LAST_VIEW')
  	    }
  	  }

src\utils\ruoyi.js

  1：添加全局方法
 		// 删除当前tab回到上一个tab
 	  export function goLastTab(store, router) {
 			if(!store || !router){
 				console.log('参数不正确，必须将$store和$router传进来')
 				return 
 			}
 			// 删除当前view
 			store.dispatch("tagsView/delVisitedView", router.currentRoute)
 			// 删除上一个view并将其中lastView中删除
 			store.dispatch("tagsView/delLastView", router)
 		}
 		
 		// 将当前tab存在缓存中，goLastTab的时候使用
 	  export function addLastTab(store,from){
 			if(!store || !from){
 				console.log('参数不正确，必须将$store和from传进来')
 				return 
 			}
 			store.commit('tagsView/SET_LAST_VIEW', from)
 		
 		}

src\main.js

		1：在main中引入全局方法
				import { addLastTab, goLastTab } from "@/utils/ruoyi";
		2：挂载全局方法
		        Vue.prototype.addLastTab = addLastTab
 			Vue.prototype.goLastTab = goLastTab

页面调用

 		1：列表页
   		     beforeRouteLeave (to, from, next) {
 			    // 设置上一次的菜单以便待会跳转回来
 			   this.addLastTab(this.$store,from)
 			    next()
 			  }, 
 		2：详情页
 		      this.goLastTab( this.$store,this.$router)