Vue刷新重载当前页面

许多场景需要做到当前页面刷新,但直接用router.push当前页面是没办法刷新的,硬刷新重载页面体验很差,在使用vue-element-admin时,看到了他们的实现方式redirect页面在created里收集到上一页面(需要刷新的页面)的路径和参数信息,再返回到上一页面,实现刷新

1.创建页面

views/redirect文件夹下新建 index.vue
路径@/views/redirect/index.vue
代码如下：

<script>
export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>

2.配置路由

// router.js
const router = new Router({
  ...
  routes: [
    ...
    {
      path: "/redirect",
      component: Layout,
      hidden: true,
      children: [{
        path: "/redirect/:path(.*)",
        component: () => import("@/views/redirect/index")
      }]
    }
    ...
  ]
  ...
})

3.使用

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