vue-router 路由刷新方案

vue-router 路如何做到刷新当前页面呢，

vue-router 官方提供一些api，可以帮助我们来实现路由跳转，比如 push,replace 等

replace api 是一个不错的选择，既能替换当前路由，又不会记录页面导航的历史记录，但是它不支持跳转到当前页面，如果 跳转到同一路由，就会报错，所以这个 api 不能直接实现我们想要的功能，我们需要通过搭桥的方式来实现页面刷新；

解决方案：

搭桥方案，既然 replace 可以进行跳转，而且不会记录历史记录，那我们可以先自己搭一个空白的页面，让它先跳转到这个空白的页面，然后在由空白的页面 跳转回来，全程利用 replace api，这样就能实现刷新的功能了。

实现步骤： 第一步：

在我们的路由中，创建一个重定向的路由，添加的路由如下

  {
    path: '/redirect/:path(.*)',
    component: () => import('@/views/redirect/index') //组件路径
  },

第二步：在 views 文件夹下面创建一个 redirect 页面，页面内容如下

<script>
export default {
  created() {
    const { params, query } = this.$route  //获取当前路由参数
    const { path } = params   //获取当前路由需要跳转的路径
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // 避免警告
  }
}
</script>

第三步： 使用方法

通过 replace 将我们需要重新刷新页面的路由路径信息传递给 空白页面，比如一些查询参数等。

//刷新路由
refresh(){
  this.$router.replace({
    path: '/redirect' + this.$route.fullPath
  })
}

总结：

首先，通过replace api 将我们要刷新页面的一些信息，传递给重定向路由，重定向页面接受我们的参数之后，在跳转回我们的当前需要刷新的页面，这样就实现了我们路由的动态刷新。