vue3页面query参数变化并重新加载页面数据方式

目录

• 一、业务场景
• 二、实现方式
• 三、发现题目
• 延伸：（keep-alive）
• 总结

一、业务场景

列表页携带id跳转到详情页，id发生变化重新加载当前页面。

跳转分两种情况，假设A页面是id为1111的详情页，B页面是id为2222的详情页。

• 第一种，A页面跳转到B页面，B页面返回时直接返回列表页。
• 第二种，A页面跳转到B页面，B页面返回时返回A页面，A页面再返回返回到列表页。

二、实现方式

焦点方法： $router.push $router.replace

A页面跳转到B页面的方法：

• 第一种情况：

• 第二种情况：

三、发现题目

到第二步，我们必要的功能就已经实现了，但是会发现地址栏id是变化了，页面数据却并没有革新，这时我们给App.vue里的router-view标签添加一个key值即可

如下：

OK！

延伸：（keep-alive）

如果router-view在keep-alive标签下，那么必要再给router-view加个状态值，用来控制router-view表现隐蔽，而且provide注入，方便页面中调用。

App.vue：

A页面里：

然后在push或者replace方法后调用reload方法。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。