vue 单页面重载（刷新）

刺骨的言语ヽ痛彻心扉 2021-12-17 00:55 490阅读 0赞

首先先说一下标题，此处的重新（刷新）并不是浏览器 `reload` ，只是当前页面组件重新 `create` 。

最近重构的项目中有重新加载的按钮，以前直接是 `location.reload()` ，但现在重构为了单页面方式，这个在 `location.reload()` 的话那体验就太 low 了，刚好前段时间看了花裤衩大佬的 [手摸手，带你用vue撸后台 系列五(v4.0新版本)][vue_ _v4.0] ，仔细思考之后不得不说这个方法很赞，巧妙的将离开页面的所有参数信息与 redirect 页面信息结合，并且在 redirect 页面信息中可以获得之前页面的信息，在 redirect 页面的 `created`生命周期函数中再替换为离开页面的信息参数，离开的页面经历了 `destroyed` 和 `created` 等其他生命周期，相当于重载了。

代码如下：

// router.js
    const router = new Router({ 
      ...
      routes: [
        ...
        { 
          // 刷新页面
          path: "/redirect/:path*",
          name: "redirect",
          component: () => import('./views/redirectPage/index.vue')
        }
        ...
      ]
      ...
    })

需要在 `views/redirectPage` 文件夹下新建 `index.vue` ，内容如下：

<script> export default { name: 'RedirectPage', created () { const { params, query } = this.$route const { path } = params this.$router.replace({ path: `/${ path}`, query }) }, render (h) { return h() } } </script>

准备工作已经做好，使用的时候如下：

...
    pageReload () { 
      // 刷新
      this.$router.replace({  path: `/redirect${ this.$route.fullPath}` })
    }
    ...

[vue_ _v4.0]: https://juejin.im/post/5c92ff94f265da6128275a85#heading-3

发表评论取消回复

表情：

评论列表（有 0 条评论，490人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue刷新/重载当前路由获取数据

Vue刷新/重载当前路由获取数据 > 1. Vue如何刷新或重载当前路由来更新数据？ > 2. Vue如何监听同一路由加载事件？方案：可以利用路由的quey参数，

川长思鸟来/ 2023年08月17日 16:39/ 0 赞/ 89 阅读

相关 vue刷新页面丢失404

解决方案 nginx添加配置文件下面内容加入配置文件 location @rewrites { rewrite ^(.

偏执的太偏执、/ 2022年12月29日 00:13/ 0 赞/ 210 阅读

相关 vue导航栏刷新返回刷新前页面

vue导航栏刷新返回刷新前页面座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人 -------------------- 文章目录

怼烎@/ 2022年12月24日 09:56/ 0 赞/ 154 阅读

相关 Vue实现页面的局部刷新（router-view页面刷新）

[https://blog.csdn.net/a5252145/article/details/102745598?utm\_medium=distribute.pc\_rel

港控/mmm°/ 2022年12月22日 11:23/ 0 赞/ 314 阅读

相关 vue如何实现页面刷新

目录 1.this.$router.go(0) 2.location.reload() 3.跳转空白页再回跳 4.控制的显示隐藏 5.搭配provide/inject

╰+哭是因爲堅強的太久メ/ 2022年11月27日 08:46/ 0 赞/ 323 阅读

相关（13）vue刷新页面

常用的有三种方法，最后一种用的比较多： 1.使用`window.location.href` `window.location.replace()` `window.l

逃离我推掉我的手/ 2022年10月01日 12:51/ 0 赞/ 154 阅读

相关 vue 单页面重载（刷新）

首先先说一下标题，此处的重新（刷新）并不是浏览器 `reload` ，只是当前页面组件重新 `create` 。最近重构的项目中有重新加载的按钮，以前直接是 `locati

刺骨的言语ヽ痛彻心扉/ 2021年12月17日 00:55/ 0 赞/ 491 阅读

相关解决vue单页面跳转页面刷新问题

在vue单页中, 使用a标签`href`跳转单页面的时候,页面会闪一下,体验很不好根据研究, 是因为a标签默认属性使页面刷新了一下方法一: 使用编程式导航

怼烎@/ 2021年12月11日 03:04/ 0 赞/ 776 阅读

相关 Vue. 之刷新当前页面，重载页面数据

Vue. 之刷新当前页面，重载页面数据如下截图，点击左侧不同的数据，右侧根据左侧的KEY动态加载数据。由于右侧是同一个页面，在进行路由跳转后，不会再次刷新数据

梦里梦外;/ 2021年10月23日 13:54/ 0 赞/ 680 阅读

相关 Vue定时刷新页面数据

我现在只知道两种最常见的定时刷新方案，一种是利用Vue的内置函数setTimeout、setInterval定时执行，另一种是websocket消息推送。我的需求是，当数据库中

骑猪看日落/ 2021年09月24日 01:54/ 0 赞/ 789 阅读