Vue项目路由刷新如何实现？

本文共计463个文字，预计阅读时间需要2分钟。

在Vue单页面应用中，若需替换参数并刷新页面，使用`this.$router.push`或`this.$router.replace`时，路由会更新但页面上的数据未实时刷新。以下是一些可行的方法：

1. 在路由参数变化后手动刷新数据。

2.使用`watch`监听路由参数，并在参数变化时执行数据刷新。

3.使用Vuex状态管理库，将数据存储在全局状态中，在路由变化时通过actions更新数据。

4.在页面组件中使用生命周期钩子`mounted`或`updated`来加载数据。

当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()就可以实现页面内数据刷新。

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