判断两次点击是否跳转到同一页面，若相同则页面数据从缓存中获取，否则调取新的接口

最新推荐文章于 2025-06-17 17:31:02 发布

原创最新推荐文章于 2025-06-17 17:31:02 发布 · 855 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#缓存 #vue.js #前端

该博客介绍了如何在Vue应用中通过监听$route$变化来实现页面内容的缓存策略。当用户点击不同的标签时，如果第二次点击的标签与第一次不同，则重新调用接口获取页面数据；若相同，则从本地缓存中加载，提高页面加载效率。这个方法特别适用于参数不同但页面组件相同的场景，避免了因组件复用导致的数据不刷新问题。

情景：有一个列表，列表的每一行有一个标签可以点击跳转到各自的页面去，如果第二次点击的和第一次点击的是同一个标签的话，那么第二次点击过去的页面内容就从缓存中拿取，否则重新调接口获取页面内容

//  监控他的路径的变化
watch:{
	'$route':{
		handler(to) {
		var hasValue = window.localStorage.getItem('detailUrl') ? window.localStorage.getItem('detailUrl') : ''
		if(hasValue) {		// 如果有值说明之前有过页面的点击跳转
			if(hasValue != to.fullPath) {			
			// 如果之前第一次跳转的路径hasValue不是这次要跳转的路径to.fullPath的话 ，
			   重新调取接口并重新存上这次跳转的路径to.fullPath 
                this.getList()
                window.localStorage.setItem('detailUrl',to.fullPath)
            }
          }else {
            // 如果没有过页面点击跳转的话就是第一次把这个to.fullPath路径存起来，供下一次参考
              window.localStorage.setItem('detailUrl',to.fullPath)
              this.getList()
            }
		}
	}
}

注意：其实准确的说不是跳到不同的页面，其实是同一个页面只不过跳转带过去的参数不一样，根据参数绘制的页面就会不一样，但是vue的created并不是每次进入到页面都会执行，因为vue会使用页面相同的组件，不会进行数据刷新所以要监控他路径的变化。