首页router .push({ path: state.redirect || '/', query: state.otherQuery }) .catch(err => { console.warn(err) })

router .push({ path: state.redirect || '/', query: state.otherQuery }) .catch(err => { console.warn(err) })

时间: 2023-06-13 20:05:06 浏览: 162

vue-router3.0版本中 router.push 不能刷新页面的问题

Vue Router 3.0 中 router.push 不能刷新页面的问题解决方案 Vue Router 3.0 中 router.push 不能刷新页面的问题是一个常见的问题，许多开发者都曾经遇到过这种情况。在这篇文章中，我们将详细介绍这个问题的原因和解决方案。问题描述在 Vue Router 3.0 中，当我们使用 router.push 方法时，页面不会刷新，虽然 URL 会发生变化，但页面不会更新。这是一个很棘手的问题，许多开发者都曾经遇到过这种情况。问题原因这个问题的原因是因为实例后的 router 不是全局的 vue 中的 this.$router。之前的版本中，使用单例模式可以直接使用 router.push，但是现在已经不再使用单例模式了。解决方案解决这个问题的最简单的方法是直接使用 this.$router.push 替代 router.push。但是，如果我们需要在组件内再实例化一个 Router，那么这个解决方案就不太行了。因为这个时候的 this 并不是全局的 vue，所以我们不能使用 this.$router。那么，终极的解决方案是什么？答案是：把全局的 vue 中的 router 加到 window 中。在 main.js 文件中，我们可以使用以下代码： ```javascript window.router = router ``` 然后，在任何地方，我们都可以直接使用 router.push 等 router 的方法了。小结在这篇文章中，我们详细介绍了 Vue Router 3.0 中 router.push 不能刷新页面的问题的原因和解决方案。希望这篇文章能够对大家的学习有所帮助。相关知识点 * Vue Router 3.0 中 router.push 不能刷新页面的问题 * 实例后的 router 不是全局的 vue 中的 this.$router * 解决方案：使用 this.$router.push 或者把全局的 vue 中的 router 加到 window 中 * 单例模式在 Vue Router 中的应用扩展阅读 * Vue Router 官方文档 * Vue Router 3.0 中的变更日志 * Vue 中的单例模式应用

这段代码是 Vue.js 中的路由跳转语句，使用了 Vue Router 中的 push 方法。它会将用户导航到指定的路由并且更新 URL，同时在浏览器的前进/后退历史记录中添加一条记录，以便用户可以使用浏览器的后退/前进按钮进行导航。在这段代码中，我们可以看到 push 方法接受一个包含路由信息的对象作为参数。该对象的 path 属性指定了要跳转的路由路径，而 query 属性则是一个包含查询参数的对象。如果需要在跳转时携带其他的参数，可以将它们添加到 query 对象中。如果在跳转时出现了错误，catch 方法会捕获并输出错误信息。

阅读全文