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

  • 小规模纳税人如何做账
  • 电梯的税收筹划怎么做
  • 车辆购置税计算器公式
  • 企业弥补以前年度亏损顺序
  • 费用计入管理费用与销售费用的区别
  • 什么是清算机构的资产
  • 营业外收入缴纳税款
  • 减免所得税优惠明细表怎么填
  • 进项税额结转不结转
  • 加计扣除和研发费不一致
  • 企业出现亏损的原因有哪些
  • 公司给的出差津贴
  • 土地使用权评估原则
  • 私营企业实行固定税率
  • 以土地出资土地增值税
  • 专项土地补偿款怎么入账?
  • 房屋租赁费属于什么会计分录
  • 发生检测费用时怎么入账
  • 公司收到股东的投资款以后怎么处理
  • 纳税调整后所得怎么算
  • 购买的厂房怎样交税
  • 固定资产赔偿制度
  • 出售使用过的固定资产如何开票 备注
  • 领款凭证可以当收据吗
  • 金蝶现金流量表附表项目如何指定
  • 货车的折旧率
  • 企业筹建期间的广告费和业务宣传费
  • 年底结账时需要做账吗
  • 顶账的固定资产怎么入账
  • 交了预付款后,一方违约怎么处理
  • 车辆的代驾费应该怎么收
  • 清算中无法偿还的债务
  • 如何安全的处置电子邮件
  • 资产减值损失结转
  • 房屋装修各项费用比例
  • 让劳务公司代发工资
  • thinkphp yii
  • 房屋赠与双方办理流程
  • html中的标签有哪些
  • web数据可视化(Echars版)实训
  • 印花税的相关问题
  • 预付一年的房租并收到了发票会计分录
  • 周转材料包装箱属于存货分类的
  • 负债总计是负数
  • 织梦论坛
  • 公司代买社保怎么收费
  • 几种财务自由
  • SQL Server 中 RAISERROR 的用法详细介绍
  • python中的参数传递
  • 汽车租赁发票账务怎么开
  • 公司自用咖啡机怎么处理
  • 托盘入账哪个科目最好
  • db2 linux
  • sqlserver存储过程加密
  • 对增值税发票开具方面有何要求?
  • 运费与快递费的区别在哪
  • 委托收款和托收承付结算流程图
  • 订单式生产的企业有哪些
  • 所有者权益包括少数股东权益吗
  • 租写字楼可以办个体户吗
  • 企业建账的流程是什么
  • xp系统如何安装软件
  • 苹果电脑如何提高网速
  • win7音量图标不能启用
  • mac系统怎么查找文件
  • windows10电量图标消失了怎么还原
  • 检查linux是否安装了,可用哪些命令
  • 语音聊天能不能调出来
  • win8显示wifi关怎么办
  • javascript教程
  • jquerygrid
  • firefox background-image垂直平铺问题的解决方法
  • unity优化技巧
  • jquery的css方法
  • 用python语言编写
  • 哪些润滑油属于润滑剂
  • 代发工资法律依据
  • 北京市地税局第一稽查局郭洪鑫
  • 贸易公司服装
  • 宁波无犯罪证明能当场拿到吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设