列表页刷新与选项卡高亮-CSDN博客

本文链接：https://blog.csdn.net/qq_40254596/article/details/106115969

需求：

在这里插入图片描述
点击编辑按钮，跳转到编辑页面，编辑好信息后，点击保存，返回到列表页面，并且显示原来高亮的选项卡，而且列表页数据更新。

问题：

在编辑页面点击保存后，跳转到列表页时，要实现页面刷新，并且选项卡高亮应在上一次编辑对应的位置，我采用的方案是路由监听，但是当路由发生变化后，就刷新页面，也就是重新请求数据，但是我监听了路由，并没有什么卵用。

// 列表页
watch: {
	// 通过监听路由刷新页面数据
	$route (to, from) {
		if(to.path === '/目标路由' && from.path === '/来源路由'){
			this.activeName = to.query.activeName
			this.getAllTableData()
		}
	},
},

解决方案：

路由没有监听的原因是：当你点击编辑时，页面跳转了，但列表页此时已经被销毁了，所以没有办法监听到，所以我们在做路由监听时，是不能让页面销毁的，这时就需要设置缓存，如下：

使用keep-alive将列表页缓存起来：

<keep-alive include="列表页">
	<router-view></router-view>
</keep-alive>

添加事件监听：

// 列表页
watch: {
	// 通过监听路由刷新页面数据
	$route (to, from) {
		if(to.path === '/目标路由' && from.path === '/来源路由'){
			this.activeName = to.query.activeName
			this.getAllTableData()
		}
	},
},

如果对您有帮助，点个赞收藏一下呗！