位置: 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求解航天器追逃博弈)

  • 微信朋友圈营销 --怎样在朋友圈卖货呢?(什么是微信朋友圈营销)

    微信朋友圈营销 --怎样在朋友圈卖货呢?(什么是微信朋友圈营销)

  • 荣耀x10和荣耀30的区别有哪些(荣耀x10和荣耀30青春版哪个好)

    荣耀x10和荣耀30的区别有哪些(荣耀x10和荣耀30青春版哪个好)

  • 微信静音对方可以听到吗(微信静音对方是不是听不见我说话)

    微信静音对方可以听到吗(微信静音对方是不是听不见我说话)

  • 手机特别烫怎么办(手机特别烫怎么降温)

    手机特别烫怎么办(手机特别烫怎么降温)

  • 小米手机暖屏怎么调成冷屏(小米11冷屏暖屏)

    小米手机暖屏怎么调成冷屏(小米11冷屏暖屏)

  • 抖音视频怎么破播放(抖音视频怎么破除压缩)

    抖音视频怎么破播放(抖音视频怎么破除压缩)

  • 相册没有的照片,微信图片里面还有,怎么删除(相册没有的照片 抖音有)

    相册没有的照片,微信图片里面还有,怎么删除(相册没有的照片 抖音有)

  • 笔记本改水冷利弊(笔记本改水冷大概需要多少钱)

    笔记本改水冷利弊(笔记本改水冷大概需要多少钱)

  • 华为hms core是什么(华为hms core是什么软件可以卸载吗)

    华为hms core是什么(华为hms core是什么软件可以卸载吗)

  • 云计算技术的服务类型分为(云计算技术的服务模式有哪些)

    云计算技术的服务类型分为(云计算技术的服务模式有哪些)

  • 一个手机可以登两个抖音吗(一个手机可以登两个qq吗)

    一个手机可以登两个抖音吗(一个手机可以登两个qq吗)

  • 数据线里面的4种颜色的线分别是(数据线里面的4种蓝白绿棕)

    数据线里面的4种颜色的线分别是(数据线里面的4种蓝白绿棕)

  • qq不加好友可以发视频吗(qq不加好友可以发文件吗)

    qq不加好友可以发视频吗(qq不加好友可以发文件吗)

  • 探探注销后手机号还可以注册吗(探探注销后手机还会收到短信吗)

    探探注销后手机号还可以注册吗(探探注销后手机还会收到短信吗)

  • 怎么把手机上的东西传到另一个手机上(怎么把手机上的app安装到电视上)

    怎么把手机上的东西传到另一个手机上(怎么把手机上的app安装到电视上)

  • 苹果11如何添加门禁(苹果11如何添加门禁卡)

    苹果11如何添加门禁(苹果11如何添加门禁卡)

  • 淘宝换货商品填写的是退的还是要换的(淘宝换货商品填错怎么办)

    淘宝换货商品填写的是退的还是要换的(淘宝换货商品填错怎么办)

  • 抖音垂直作品是什么意思(抖音作品垂直是啥意思)

    抖音垂直作品是什么意思(抖音作品垂直是啥意思)

  • 网易云音乐vip过期后下载的歌还能听吗(网易云音乐vip过期了下载的歌还能听吗)

    网易云音乐vip过期后下载的歌还能听吗(网易云音乐vip过期了下载的歌还能听吗)

  • 为什么移动卡突然变2g(为什么移动卡突然用不了)

    为什么移动卡突然变2g(为什么移动卡突然用不了)

  • 发抖音怎么隐藏抖音号(发抖音怎么隐藏ip地址)

    发抖音怎么隐藏抖音号(发抖音怎么隐藏ip地址)

  • u盘连接手机怎么读取(u盘连接手机怎么用)

    u盘连接手机怎么读取(u盘连接手机怎么用)

  • 学习通如何退出班级

    学习通如何退出班级

  • 拼多多挂机悬浮怎么关(拼多多挂机悬浮怎么设置)

    拼多多挂机悬浮怎么关(拼多多挂机悬浮怎么设置)

  • 金税盘如何交服务费
  • 已经认证抵扣的发票还能作废吗
  • 小型微利企业企业所得税优惠政策2021年
  • 其他应付款借方余额怎么调整
  • 高新企业奖励金怎么领
  • 黄金销售免税
  • 租车纳税
  • 如何存银行
  • 税负率怎么算计算公式举例说明
  • 免征土地增值税
  • 电子发票和纸质发票哪个好
  • 佣金收入者是什么意思
  • 建筑行业跨期收入汇算清缴如何调整?
  • 企业只有收入没有支出是否违规
  • 贷款利息收入要减去支付利息支出吗
  • 可以给行政事业单位开增值税专用发票吗
  • 开具旧税号也能认证成功
  • 合同印花税多交了怎么退
  • 租房时,怎么替房东缴税?
  • 教资认定流程详细步骤2023
  • 销售购物卡如何开票
  • 开票需要对方提供营业执照吗
  • 固定资产报废需要在固定资产系统中
  • 撤销申报增值税流程
  • 跨年度的暂估入库账务处理
  • 生产企业先出库后入库
  • 权益法核算的投资收益要做递延所得税吗
  • 在线上网测试
  • 银行承兑汇票的转让一般通过什么渠道
  • 企业职工教育经费
  • 财政拨款收入属什么科目
  • 股东分红怎么处理
  • MacOS X Yosemite升级后postgresql启动报错的解决办法
  • 计提的发展基金如何使用
  • php储存数据的方法
  • 企业之间拆借资金
  • 布列塔尼岛屿
  • thinkphp demo
  • 收到的国家电网电话
  • phpgd库怎么开
  • php或者判断
  • 关于成本核算的论文题目
  • ps渐变透明效果怎么弄
  • 民办非企业培训机构注册流程
  • 纳税申报系统里怎么填写
  • 未交增值税借方余额怎么调整
  • 税务企业类型分为哪几种
  • 怎么作废银联在网上银行
  • sql查表结构语句
  • 小规模纳税人的认定标准是什么
  • 所得税调增调减技巧
  • 公司收到生育津贴不给员工
  • 金税盘维护费抵税会计分录
  • 税控技术服务费会计分录
  • 电子银行承兑汇票操作流程
  • 盘亏机器设备
  • 建筑企业结转成本能不能不分人材机
  • 客户退货不退赠品怎么办
  • 小规模普票冲红能退税吗?
  • windows怎么管理员权限
  • windows磁盘如何分区
  • win8.1技巧
  • regloadr.exe - regloadr是什么进程 有什么用
  • windows以管理员权限打开文件
  • windows用户注册
  • mac版本itunes
  • 怎样设置ie8
  • js的split用法
  • js设置图片宽度
  • unity3d quaternion
  • ecmascript新特性
  • jquery点击方法
  • 1、BluetoothChat之BluetoothChat.java
  • pythonwhile循环语句用法
  • 辽宁省农村合作医疗2024怎么缴费
  • 税务总局33号公告
  • 国地税机构改革方案
  • 航信开的电子发票怎么导出来
  • 哈尔滨地税局电话
  • ssr服务器地址端口密码
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设