Vue通过ID修改URL复用同一个页面/组件,不重新加载的问题以及版本Vue版本升级导致的Uncaught (in promise)问题

最新推荐文章于 2024-10-24 14:52:08 发布

原创最新推荐文章于 2024-10-24 14:52:08 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

13 篇文章

订阅专栏

探讨了在Vue项目中，使用相同页面结构时如何通过路由参数区分不同状态，及解决因参数变化但未触发页面刷新的问题。介绍了利用watch监听路由变化的方法，并提供了解决vue-router版本问题导致的错误方案。

在项目中经常会用到同一个页面，结构是相同的，只是

vue-router中通过添加参数的方式来区分状态，参数可以在页面跳转时带上params，或者query，但是即使我们修改了参数，URL也显示已经改变，但页面并不会刷新，因为路由是相同的，vue就会认为你是同一个页面，从而复用已加载的页面，而不会重新加载，可以通过watch监听事件来监听路由的变化：

  watch: {
    $route(to, from) {
      if (to.name === "account") {
        // 在此调用函数，如：
        this.getAccountInfo();
      }
    }
  },

但是又出现了新的错误：

这是因为vue-router的版本问题

解决方法：

1、可以降低vue-router的版本试试

2、在调用方法的时候用catch捕获异常

3、在vue-router的配置文件(默认是router/index.js中)中重写路由的push方法

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

以上是自己踩坑的一些记录

感谢以下博客主：

vue通过ID（参数）修改URL复用同一个页面（组件）不重新加载的问题

vue-router升级导致的Uncaught(in promise)问题