概要

开发中遇到的罕有需求，一般来说切换路由页面就会重新渲染，相应接口也会自动刷新。但是有些需求新增页面是走路由的，关闭心中页会关闭当前面包屑，返回上一个，所以这时候由于之前列表页的面包屑一直存在，当前页面数据就不会刷新。

案例

如图：新增页面保存成功/关闭后返回列表页，当前是直接关闭新增页面的面包屑实现，所以遇到列表页数据不刷新问题，尤其新增后效果最明显。

解决方法

直接上代码,在需要刷新的页面直接加上这段代码。

data(){
	return {
	  		//定义变量保存上一个路由的路径
	         previousRoutePath:'上一个路由的路径'
			}  
    },
watch: {
    $route(to, from) {
        if (to.path === this.previousRoutePath) {
            // 在这里调用查询页面方法
            this.fetchData(); // 假设fetchData是获取数据的方法
        }
        this.previousRoutePath = from.path;
    }
},

小结

• $route是Vue.js内置的路由对象，watch会监视它的变化。

• 当路由发生变化时，会触发$route对象的变化，从而执行watch中定义的逻辑。

• 在逻辑中，通过比较当前路由的to.path和之前路由的this.previousRoutePath来确定是否需要调用查询页面方法。

• 如果当前路径与之前路径相同，即路由未发生变化，就调用fetchData()方法重新获取数据。

• 最后，将当前路由的路径赋值给this.previousRoutePath，以便下一次路由变化时进行比较。