小技巧-优雅实现页面刷新(vue)-技术圈

点击上方“前端简报”，选择“设为星标”

第一时间关注技术干货！

前几天项目经理提了个需求要实现点击刷新按钮实现页面的局部刷新,刷新页面使用谷歌的重新加载不是就可以了何必要去自己开发呢？结果自己尝试了一番发现只能实现全局的刷新，局部刷新还是比较捉急。

尝试

push和replace这两个都方法都是vue-router提供的api。

在vue项目中使用this.$router.push()方法来跳转不同路径,如果跳转相同的路径的话会发现页面并没有刷新，而是在histry栈中添加了一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

使用this.$router.replace()方法报错vue-router.esm.js?8aaf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location这个是由于多次访问相同路由导致路由重复。

转化

将要刷新的路由和刷新后的路由之间通过一个桥梁(作为过渡)来连接。

将路由的信息和参数全部都传给"桥梁",当其跳转的一瞬间获取到参数和路由信息跳转到原来的路由。为了让用户无感知在跳转"桥梁"路由的时候使用replace方法不会向history中添加新的记录,在跳回原路由的时候是history方法，如果路由相同会替换之前的路由，而用户在点击浏览器回退按钮的时候悄然不知做了什么。

this.$router.replace({
    path: '/redirect' + fullpath
})

配置路由信息

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

桥梁文件

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

更多文章https://clown-jack.github.io/