网络编程 
首页 > 网络编程 > 浏览文章

vue-router重定向不刷新问题的解决

(编辑:jimmy 日期: 2024/11/18 浏览:3 次 )

前阵子太忙了,自己一个人一边开发着新项目,一边维护着旧项目,没时间写博客,终于让我腾出时间了。废话少说,开始正文。

问题描述:

之前项目是angular开发的,后来用vue重构后。项目路径和vue路径不一致,但是app端分享出的链接,依旧是旧项目链接

解决方法:

通过阅读vue-router的官方文档,发现重定向可以解决这个问题。

如之前文件路径是'/live/detail/id=7234','/skill/microList/',新项目路径是 '/s/live/detail"htmlcode">

{path: '/live/list(/)"codetitle">复制代码 代码如下:{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.js 实现输入框动态添加功能
下一篇:JavaScript实现封闭区域布尔运算的示例代码