vue 中你不知道的刷新姿势

212 阅读1分钟

笔者啊,你居然写篇文章说页面的刷新?那多简单啊,window.location.reload 不就完事了嘛,小样。

reload真的是你想要刷新吗?

调用 reload 刷新整个页面

  1. 重新加载资源
  2. 处理html、css,执行js
  3. 各种初始化
  4. ...... 我jo的这是刷新,但不是追求极致的我们的想要的刷新

谈谈我认为该怎么刷新

  1. 创建一个redirect页面,这个页面的作用只有一个,就是跳转,即
const { params, query } = useRouter()
replace({
    path: '/' + router.params.path,
    query,
});
  1. 路由
 {
  path: '/redirect/:path(.*)',
  name: 'redirect_view',
  component: () => import('/@/views/sys/redirect/index.vue'),
},
  1. 需要刷新页面的时候(如点击刷新按钮)
router.replace(`/redirect/${route.path}`)

总结

本文例子是vite + vue3,vue2中实现原理是一样的。创建一个跳转页面,在这个页面中再跳回到之前的页面即可;
长路漫漫,且行且珍惜。