許多場景需要做到當前頁面刷新,但直接用router.push當前頁面是沒辦法刷新的,硬刷新重載頁面體驗很差,在使用vue-element-admin時,看到了他們的實現(xiàn)方式redirect頁面在created里收集到上一頁面(需要刷新的頁面)的路徑和參數(shù)信息,再返回到上一頁面,實現(xiàn)刷新

1.創(chuàng)建頁面

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}` })
...