vue项目使用$router.go(-1)返回时刷新原来的界面操作

网络编程 2024/12/23 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

在项目需求中，我们常常需要使用$router.go(-1)返回之前的页面，但是却发现，之前的界面，保持着上次跳转的状态，比如说：弹框未关闭之类的等等，。。。。。

问题如下：

界面1 ：

界面2使用$router.go(-1)返回上一次的界面

由于使用$router.go(-1)返回，导致之前的数据都保留，并未刷新原来的界面，如下：还是显示跳转前的弹框

解决方法1：

不要使用$router.go(-1)，而是使用$router.push('某某某'),但是其实这种方法是不合理的，因为你可能跳转的页面是很多页面都可能跳转的，所以如果直接使用$router.push('某某某'),虽然可以解决当前跳转不刷新的问题，但是会导致点击其他页面跳转到页面2，点击使用$router.push('某某某'),所谓的返回按钮，是永远跳转到界面1，不符合现实需求，所以，不推荐使用该方法

解决方法2：

在界面1的watch中，对router进行监控，当router发生变化时，初始化界面；

根据本项目进行案例演示：

代码如下：

界面一弹出框，使用的是使用pop来控制，显示的时候是pop = true,不显示的是pop = false

之所以使用$router.go(-1)时弹框未关闭是因为pop还是true,所以使用如下方法解决，当router变化的时候初始化数据pop

综上所述：

解决方法：

watch: { '$route' () { // 此处写router变化时，想要初始化或者是执行的方法...... } },

以上这篇vue项目使用$router.go(-1)返回时刷新原来的界面操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

vue,$router.go(-1),刷新界面

标签：

vue,$router.go(-1),刷新界面

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“vue项目使用$router.go(-1)返回时刷新原来的界面操作”

暂无vue项目使用$router.go(-1)返回时刷新原来的界面操作的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

更新日志

2024年12月23日

vue项目使用$router.go(-1)返回时刷新原来的界面操作

vue,$router.go(-1),刷新界面

使用React-Router实现前端路由鉴权的示例代码

vue 页面回退mounted函数不执行的解决方案

评论“vue项目使用$router.go(-1)返回时刷新原来的界面操作”

更新日志

友情链接