vue中实现刷新路由

 我来答
新科技17
2022-07-24 · TA获得超过5917个赞
知道小有建树答主
回答量:355
采纳率:100%
帮助的人:75.9万
展开全部

有时候有这样的场景,需要重新加载当前的页面,但不是像刷新浏览器一样刷新整个网站,那样如果有全局保存的数据(比如vuex的数据,当前页面的路由参数)就会重置,所以需要实现刷新当前路由。

实现先说一个属性: router.replace
replace push 用法基本一样,但不会在浏览器留下 history 记录,就是当你使用 replace 访问的路径,通过浏览器的前进后退按钮都访问不到。

实现的方法有点投机取巧,就是建立一个空页面,通过 router.replace 访问,再从空页面使用 router.replace 跳转回来,达到刷新当前路由的效果。下面是基础实现:
先建立一个组件做空页面, refresh.vue

通过使用组件的路由前置守卫返回上一个页面,需要注意的是在这个守卫中访问不到 this 实例,需要通过在 next 回调中的参数代表平时的 this
再建立这个空页面的路由信息:

最后在你需要刷新路由的组件中的方法中访问该路径即可:

这样算是完成一个乞丐投机取巧版的刷新当前路由,这种方法是有瑕疵的,当刷新的路由带有参数, params 或者 query ,通过这个刷新方式之后参数就会丢失,所以需要将上面的方法加以改造一下,让参数页面的参数保持不变,先从需要刷新路由的组件的方法改造:

这样兼容了路由中带有 params query ,先判断了当前路由是否有 params 属性,如果当前路由没有 params query 属性,默认都是空对象,所以传递一个空对象跟没传是一样的。注意路由跳转传递 params query 的方式不相同,传递 params 时,不能使用路由的 path ,需要用到路由 nam e属性,所以上面分了情况进行跳转。这样跳转到写好的空页面,参数是传递给 refresh 这个路由,所以需要再从这个空页面传递回来,下面是改造后的 refresh 组件:

在这个路由守卫中, to 就代表当前页面,也就是 refresh 组件

改造后这个刷新路由的方式就兼容了路由带有参数的情况,目前超人鸭遇到的需求这种方式已经能满足,如果还有其他情况需要再做处理的,或者有更好的实现方法,欢迎指教哦。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式