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

  • 外管证是在当地办理还是在外地办理
  • 房产税的计税依据包含增值税吗
  • 小规模纳税人开普票要交税吗
  • 高新技术企业加计抵减
  • 政府会计固定资产盘亏的账务处理
  • 未收回的货款是企业资产吗
  • 发票用完了领发票需要带什么东西
  • 摄影服务的开票项目
  • 技术服务费怎么开票税率
  • 共同控制合营企业
  • 利息收入红冲怎么做
  • 企业比赛奖品买什么好
  • 进项票超过180天还可以认证吗
  • 金蝶财务软件不能反结账
  • 员工差旅补贴是否需要发票
  • 政府补贴物业公司
  • 自己开电子发票要什么软件
  • 固定资产弃置费怎么算
  • 行政划拨无偿取得的土地使用权属于什么资产
  • cmos密码和bios密码
  • 王者荣耀干将莫邪技能
  • 本年利润贷方为正数
  • 中秋节给员工购物文案
  • 差额征税的项目 按差额记账还是全额倒算销项税
  • 发生坏账计入
  • 公司报销医疗费的范围
  • drvmgr.exe
  • 户外广告位怎么收费
  • fpx是什么文件
  • Yii使用技巧大汇总
  • smarty怎么用
  • 营业外支出会计准则
  • php一个页面多个分页
  • php操作字符串函数
  • vue中利用ref实现更灵活的子向父传值
  • 增值税专用发票和普通发票的区别
  • 存货非正常损失的会计处理
  • 进项发票是专票吗
  • 什么是企业的应付账款
  • 文化事业建设费税收优惠2023
  • 业务招待费列支不规范
  • 子公司减资是利好还是利空
  • 动产什么时候取得所有权
  • 增值税纳税申报类型怎么填
  • mysql相关
  • mongodb查询操作
  • 计提印花税会计
  • 商业汇票分为哪几种
  • 所得税预缴政策
  • 会计中级工作年限截止日期
  • 年度亏损计提所得税吗
  • 工会经费和福利费绩效目标怎么写
  • 事业单位劳务派遣工能长期干下去吗
  • 冲抵和抵扣
  • 出口退税申报系统自检数据撤销
  • 关于外币折算会计处理的表述中
  • 利息收入缴纳税率怎么算
  • 物业公司管理费用都有哪些科目
  • 增值税不超过30万,普通发票可以开0税率吗
  • 实缴资本在公司能查到吗
  • 销售佣金的会计科目
  • 行政事业单位负责人应当对本单位内部控制
  • 升级win8.1 64位系统后无法玩剑灵怎么办?win8.1系统无法玩剑灵的解决方法
  • xp系统中制作动画的软件
  • centos怎么样
  • csrss exe
  • Windows Server 2012服务器管理器的详细介绍
  • uup windows
  • win7纯净版系统安装教程
  • 如何修改win7电脑用户密码
  • shell脚本字符串换行
  • unity技术分享
  • 请问木瓜
  • android实现侧边栏
  • javascript异步编程
  • 一般纳税人业务招待费可以抵扣吗
  • 新疆国税局电子税务局
  • 山西国家税务总局
  • 江西省国家税务局总局官网
  • 税务稽查工作底稿属于什么证据
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设