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

关注

VIP免费原创最新推荐文章于 2026-03-26 10:08:12 发布 1.6k 阅读 AI 写同款· GEO 优化 ›

深入解析若依Vue3路由机制：为什么你的页面切换会白屏？本文深入解析了若依Vue3框架中路由切换导致白屏的根本原因。核心在于Vue Router的渲染机制与组件实例复用的冲突，特别是动态路由参数变化时，若依赖`onMounted`钩子获取数据，可能导致组件不更新。文章对比了`:key="route.path"`的缺陷、`Math.random()`方案的利弊，并提供了使用`route.fullPath`或定制化`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