符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这期内容当中小编将会给大家带来有关vue-router中重定向不刷新问题如何解决,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
专注于为中小企业提供成都做网站、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业龙南免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。前阵子太忙了,自己一个人一边开发着新项目,一边维护着旧项目,没时间写博客,终于让我腾出时间了。废话少说,开始正文。
问题描述:
之前项目是angular开发的,后来用vue重构后。项目路径和vue路径不一致,但是app端分享出的链接,依旧是旧项目链接
。
解决方法:
通过阅读vue-router的官方文档,发现重定向可以解决这个问题。
如之前文件路径是'/live/detail/id=7234','/skill/microList/',
新项目路径是 '/s/live/detail?id=7234','/s/live/list'
{path: '/live/list(/)?:foo', redirect: '/s/live/list'}, {path: '/s/live/list', meta: {keepAlive:true,title: '课程'}, component: resolve => require(['../pages/s/live/list/Index.vue'], resolve)}, {path: '/live/detail(/)?:id', redirect: '/s/live/detail?:id'}, {path: '/s/live/detail', meta: {title: '课程详情'}, component: resolve => require(['../pages/s/live/detail/Index.vue'], resolve)},
新的问题:
本来以为重定向就万事大吉了,结果发版后,有用户反馈是空白页面。我仔细看了路径没问题啊,顺直一点点排查,发现重定向成功了,但是页面没刷新
解决方法:
通过仔细观察,重定向的过程,发现会先执行旧路由,再进行重定向,那么可以统一配置旧路径,让其刷新。router中
复制代码 代码如下:
{path: '*',meta:{title: '学部'}, component: resolve => require(['../pages/NotFound/Index.vue'], resolve)},
使用通配符,让之前没有写路径规则的页面,统一跳转到一个新的页面,让再新页面判断是否是重定向过来的。NotFound页面的代码
beforeRouteEnter(to,from,next){ next(vm => { console.warn(to.redirectedFrom) if(to.redirectedFrom){//vue-router redirect不会刷新页面,需要判断并刷新 // vm.$router.go(0)//safari浏览器go(0)无效 window.location.reload() } }) },
重定向的页面会有redirectedFrom这个属性,然后让其刷新即可。
上述就是小编为大家分享的vue-router中重定向不刷新问题如何解决了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。