Vue项目路由刷新的实现代码

时间:2021-05-26

当vue单页面需要替换参数并刷新页面时,这个时候使用this.$router.push或this.$router.replace会发现路由改变了,但是页面上的数据并没有实时刷新。在网上找到了以下几种方法,亲测可用:

this.$router.go(0)

在具体页面中,先通过this.$router.push或this.$router.replace替换路由,随后调用this.$router.go(0),页面就会强制刷新,但是该强制刷新与F5刷新效果类似,页面会有空白时间,体验感不好;

provide/inject

首先在app.vue页面中增加如下配置:

<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div></template><script>export default { name: 'App', data() { return { isRouterAlive: true } }, provide() { return { reload: this.reload } }, methods: { reload() { this.isRouterAlive = false this.$nextTick(() => { this.isRouterAlive = true }) } }}</script>

然后在具体页面中加上inject配置,具体如下:

export default { name: 'orderAndRandom', // 就是下面这行 inject: ['reload'], data() {}, // 省略 }

加上配置后,在调用this.$router.push或this.$router.replace替换路由后,再新增this.reload()就可以实现页面内数据刷新。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章