VUE路由变更页面未更新问题

最新推荐文章于 2025-06-30 11:57:25 发布

原创

最新推荐文章于 2025-06-30 11:57:25 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#VUE组件复用 #页面更新 #VUEX状态本地存储 #路由切换 #刷新页面

在Vue项目中，通过路由切换APPID显示不同数据时遇到页面未更新问题。解决方案包括使用VUEX存储全局状态，监听状态变化更新URL参数，并探讨了组件复用、路由监听以及使用key值或本地存储避免页面复用的问题。

VUE路由变更页面未更新

业务需求

业务需求

在做一个管理用户账户下APP的网站，在主页需要切换应用APP的ID，来显示不同APP对应的数据，对不同APP进行操作。

实现方案

由于切换APP对应的是整个页面的更新，考虑通过将APPID直接作为URL参数，切换时，变更URL地址后的APPID，对应页面数据通过URL参数进行请求。此时需要维护一个全局变量存储这个APPID，于是利用了VUEX全局状态管理。

页面中由三部分组件组成，headerBar，sideBar，MainContent。通过headerBar下拉列表选择appName切换appId，此时将appId存储到VUEX维护的变量commandState中，在headerBar组件中切换app更新appId，同时更新VUEX。~~监听commandState的变化，变化后切换URL地址并携带请求参数（commandState的值）~~ 。

this.AppsModel.getApps()
	.then((res) => {
   
   
		this.myApp = res.data.data.filter(item => item.appid === command)[0].appName;
        this.$store.commit('setCommandStateVal