js局部刷新当前页面(js页面局部刷新)
作者:一只团团 •更新时间:2023-07-03 12:43:23
大家好,今天霖霖来为大家解答关于js局部刷新当前页面以下问题,js页面局部刷新很多人还不知道,现在让我们一起来看看吧!
在开发vue项目过程中,因为项目原因需要实现局部刷新操作。就比如最常见的管理系统。左边是菜单,右边一大块是路由区域。因为如果使用window.location.x的方式的话会导致整个网页刷新。造成数据跟状态的丢失、这并不是我们想要的。因为毕竟这是个单页应用。只是需要局部刷新而已。既刷新路由区域。
思路
因为vue路由切换的时候数据都会重新刷新。所以我们就利用这个
- 新建一个公共组件。用于实现重定向跳转,进而实现刷新操作。组件名称redirect.vue
// redirect.vue 组件就这么简单,就只有这么点内容。目的只是用于重定向u0026lt;scriptu0026gt;export default { created() { const { params, query } = this.$route const { path } = params this.$router.replace({ path: u0026#39;/u0026#39; + path, query }) },}u0026lt;/scriptu0026gt;
// router.jsconst routes = [ // 重定向,用于实现刷新操作 { path: u0026#39;/redirect/:path(.*)u0026#39;, component: () =u0026gt; import(u0026#39;../views/redirect.vueu0026#39;), }, { path: u0026#39;/u0026#39;, name: u0026#39;loginu0026#39;, meta: {title: u0026#39;登录页u0026#39; }, component: () =u0026gt; import(u0026#39;../views/login.vueu0026#39;) }]
以后我们需要刷新则只需要导航到/redirect下
- 需要刷新当前页面用法如下:
// 刷新当前页面 refreshSelectedTag() { this.$nextTick(() =u0026gt; { this.$router.replace({ path: u0026#39;/redirectu0026#39; + this.selectedTag.path, }) }) },
注意:this.selectedTag.path是你需要刷新的路由
第二种实现思路,在router-view使用v-if
- 在根组件中
- 在组件中使用
本文到此结束,希望对大家有所帮助。
本文由用户上传,如有侵权请联系删除!