如何实现网页当前页面刷新功能

类似于这样的页面

实现思路如下:

  1. 首先我们在pinia中定义一个刷新状态的字段,点击按钮的时候,改为相反的值
  2. 对主页面的路由跳转Router-view绑定一个v-if,它绑定一个自定义的一个响应的参数,我们在主页面监听pinia的刷新状态数据,如果它发生变化,就把定义的响应参数改为false,那么对应的路由组件就会销毁,当销毁完成,dom重新生成完成后,再把 响应状态改为true,这样组件就会重新创建,实现刷新功能,这里的dom重新生成触发,可以通过nextick(),方法实现
let isRefresh=ref(true)
watch(()=>isFold.refresh,()=>{
    console.log('改变了')
    isRefresh.value=false
    nextTick(()=>{
        console.log('dddddddd')
        isRefresh.value=true
    })
})

相关推荐

  1. 小程序如何刷新当前页面

    2024-01-12 16:24:03       37 阅读
  2. 小程序如何刷新当前页面

    2024-01-12 16:24:03       7 阅读
  3. vue开发网站--刷新当前页面

    2024-01-12 16:24:03       7 阅读
  4. 如何做到页面实时刷新

    2024-01-12 16:24:03       32 阅读
  5. js如何实现修改URL参数并不刷新页面

    2024-01-12 16:24:03       14 阅读
  6. 微信小程序重新加载当前页面刷新当前页面

    2024-01-12 16:24:03       21 阅读
  7. Vue中实现【组件局部刷新】及【页面刷新

    2024-01-12 16:24:03       15 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-12 16:24:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-12 16:24:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-12 16:24:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-12 16:24:03       20 阅读

热门阅读

  1. git远程仓库配置

    2024-01-12 16:24:03       43 阅读
  2. openssl3.2 - 官方demo学习 - cipher - aesccm.c

    2024-01-12 16:24:03       29 阅读
  3. 常见的传感器技术汇总简介

    2024-01-12 16:24:03       39 阅读
  4. sdbusplus:method同步调用通用函数

    2024-01-12 16:24:03       29 阅读
  5. python第三节:Str字符串类型(4)

    2024-01-12 16:24:03       36 阅读
  6. 「BUG」启动jar配置文件里的参数无法替换。

    2024-01-12 16:24:03       42 阅读