位置: IT常识 - 正文

vue 项目中刷新当前路由(vue页面刷新时原有的数据还在吗)

编辑:rootadmin
vue 项目中刷新当前路由 摘要

推荐整理分享vue 项目中刷新当前路由(vue页面刷新时原有的数据还在吗),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue页面刷新时原有的数据还在吗,vue 刷新数据,vue刷新某个组件,vue中刷新当前页面,vue 刷新数据,vue刷新页面的方法,vue中刷新当前页面,vue 刷新数据,内容如对您有帮助,希望把文章链接给更多的朋友!

        在用 spa(单页面应用) 这种开发模式之前,用户每次点击侧边栏都会重新请求这个页面,用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。但现在 spa 就不一样了,用户点击当前高亮的路由并不会刷新 view,因为 vue-router 会拦截你的路由,它判断你的 url 并没有任何变化,所以它不会触发任何钩子或者是 view 的变化。

使用场景

        当可能需要触发路由保护时,重新加载很有用。例如,假设用户在一个页面中注销并且还处在当前页面 A 中。A 可能允许访客使用,但它可能仅限于登录用户。这就是为什么在页面 A 上需要重新刷新,A 上的路由守卫会触发重定向到主页或登录页面,不然你就可以一直点击页面 A 的侧边栏,而不被拒绝访问。

vue 项目中刷新当前路由(vue页面刷新时原有的数据还在吗)

解决方法

1、上一篇博客中有一个方法(v-if)

2、不改变 current URL 就不会触发任何东西,那可不可以强行触发 hook 呢?通过不断改变 url 的 query 来触发 view 的变化。监听侧边栏每个 link 的 click 事件,每次点击都给 router push 一个不一样的 query 来确保会重新刷新 view。

clickLink(path) { this.$router.push({ path, query: { t: +new Date() // 保证每次点击路由的query项都是不一样的,确保会重新刷新view } })}

ps:不要忘了在 router-view 加上一个特定唯一的 key,如 <router-view :key="$route.path"></router-view>,但这也有一个弊端就是 url 后面有一个很难看的 query 后缀如 xxx.com/article/list?t=1496832345025 

3、还可以判断当前点击的菜单路由和当前的路由是否一致,若一致的时候,会先跳转到一个专门 Redirect 的页面,它会将路由重定向到想去的页面,这样就起到了刷新的效果了。

点击的时候重定向页面至 /redirect

const { fullPath } = this.$routethis.$router.replace({ path: '/redirect' + fullPath})

redirect 页面在重定向回原始页面

// redirect.vueexport default { beforeCreate() { const { params, query } = this.$route const { path } = params this.$router.replace({ path: '/' + path, query }) }, render: function(h) { return h() // avoid warning message }}
本文链接地址:https://www.jiuchutong.com/zhishi/297853.html 转载请保留说明!

上一篇:JS 生成条形码(一维码)jsBarcode(js生成条形码的方式有哪些)

下一篇:如何用Python求解微分方程组(如何用python求解航天器追逃博弈)

  • 税务师税法一税法二区别
  • 个人所得税申报退税多久到账
  • 行政事业单位卖废品怎么处理
  • 进项税多久有效
  • 盘盈固定资产明细账怎么填写?
  • 合伙企业分配利润如何纳税
  • 企业会计准则季报报送哪几个报表
  • 汽车修理店业务范围
  • 内部损益表
  • 待摊费用的金额
  • 计提出口关税会计分录
  • 产品销售员
  • 计入固定资产的土地
  • 个人去税务局开劳务费税率
  • 远洋船员如何征收个人所得税?
  • 制冷设备增值税税率
  • 收到分红款企业所得税怎么填报
  • 土地增值税清算报告
  • 上月计提费用下月一定要冲回吗
  • macos usb启动
  • 年度利润总额是会计利润吗
  • bios设置图文详解
  • 代收消费税计算
  • winrar压缩后生成的文件格式
  • 外资企业采购退税流程
  • php如何运行脚本
  • 息税前利润和税前净利润的关系
  • vue qrcode生成二维码
  • 建筑保温材料施工工艺
  • 固定资产汽车抵扣新政策
  • 对外支付佣金需要扣缴所得税吗
  • 税控减免怎么做账
  • el-table懒加载合并行
  • php 统计
  • 税务系统申报表
  • phpcms v9用户手册
  • 发票校验码二维码看不到了怎么查
  • 个体工商户社保扣费不成功
  • 购买保健食品
  • 公司对其他公司的投资怎么做账
  • db2之间的数据库迁移
  • 小规模纳税人销售货物税率是多少
  • 事业单位财政拨款收入会计分录
  • 坏账准备的账务处理例题视频讲解
  • 无发票的费用该谁承担
  • 其他货币资金是什么科目
  • 公司购买不动产契税税率
  • 个人所得税征税对象是什么
  • 吸收合并需要编制
  • 一般纳税人注销公司麻烦吗
  • 质保金怎么做账
  • 融资方式股权融资
  • 交通运输业营改增
  • 网络竞价须知
  • 培训费产生的差额怎么算
  • 天猫佣金会返还吗
  • 应付账款的贷方等于预收账款的借方
  • 年化利率是什么意思
  • 工业企业的材料
  • win7安装mysql5.5
  • centos 命令大全
  • windows7怎么画画
  • 电脑xp系统如何
  • macos time machine
  • 2021年win10新系统版本
  • windows适配器未连接
  • windows阻止
  • 阴影效果有什么用
  • javascript继承原理
  • about ContentProvider
  • linux系统mysql自动备份并使用ftp上传的方法
  • 自制u盘杀手
  • vue curd生成
  • javascript基于什么的语言
  • 搭建nodejs项目
  • jquery的过滤器用于指定什么东西
  • javascript如何学
  • js获取设备
  • 那些so 叼的android studio 插件
  • 江西企业社保缴费基数查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设