VUE刷新页面组件问题

场景：

项目当中如过需要切换整个页面数据，例如切换店铺，切换商家账号等操作，通常情况下都需要刷新数据或者刷新当前页面.。
网上查到的方法有：
方式一：location.reload、$router.go(0)、location.href
优缺点：一句代码，操作简单，但是会出现页面空白，用户体验不好
方式二：$router.replace
优缺点：操作简单，解决了页面空白问题，但是地址栏会出现快速切换的过程

解决方案

方式三：通过store.dispatch删除缓存，并重载组件。最简单的调用方式： refreshPage(undefined)，matched会自动处理并刷新组件，也可自定义obj销毁。

  // 刷新页面组件
  refreshPage(obj) {
    const { path, query, matched } = router.currentRoute;
    if (obj === undefined) {
      matched.forEach((m) => {
        if (m.components && m.components.default && m.components.default.name) {
          if (!['Layout', 'ParentView'].includes(m.components.default.name)) {
            obj = { name: m.components.default.name, path: path, query: query };
          }
        }
      });
    }
    return store.dispatch('tagsView/delCachedView', obj).then(() => {
      const { path, query } = obj
      router.replace({
        path: '/redirect' + path,
        query: query
      })
    })
  },

---

总结：

以上就是全部内容，希望本文对你所帮助，转载请标明出处。