Vue项目路由刷新的实现代码
更新时间：2019年04月17日 08:26:23 作者：坤少卡卡
这篇文章主要介绍了Vue项目路由刷新的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
当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()就可以实现页面内数据刷新。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue三元运算之多重条件判断方式(多个枚举值转译)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue结合ElementUI实现数据请求和页面跳转功能(最新推荐)
我们在Proflie.vue实例中,有beforeRouteEnter、beforeRouteLeave两个函数分别是进入路由之前和离开路由之后,我们可以在这两个函数之内进行数据的请求,下面给大家分享Vue结合ElementUI实现数据请求和页面跳转功能,感兴趣的朋友一起看看吧2024-05-05
这篇文章主要介绍了vue + electron应用文件读写操作,如果要制作的应用并不复杂，完全可以将数据存储在本地文件当中，然后应用就可以通过这些文件进行数据的读写，需要的朋友参考下吧2022-06-06
浅谈一下Vue生命周期中mounted和created的区别
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期,在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,那么这些过程中，具体vue做了些啥，我们今天来了解一下2023-05-05
深入理解vue.js中$watch的oldvalue与newValue
这篇文章主要给大家介绍了关于vue.js中$watch的oldvalue与newValue的相关资料，文中通过示例代码介绍的非常详细，并且介绍了关于watch的其他测试，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-08-08
在项目开发中,经常会用到svg图标,之前用的都是vue-svg-icon,接下来通过本文给大家介绍Vue中使用SVG-ICON的配置方法,感兴趣的朋友跟随小编一起看看吧2024-02-02
浅谈vue websocket nodeJS 进行实时通信踩到的坑
这篇文章主要介绍了浅谈vue websocket nodeJS 进行实时通信踩到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
今天小编就为大家分享一篇Vue前后端不同端口的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
作为一个AI模型,人脸识别涉及到多个技术领域,下面这篇文章主要给大家介绍了关于vue使用tracking实现人脸识别/人脸侦测的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
Vue3中Element Plus Table(表格)点击获取对应id方式
这篇文章主要介绍了Vue3中Element Plus Table(表格)点击获取对应id方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论