脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → vue-router重定向不刷新

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

 更新时间：2018年06月25日 10:48:54   作者：无敌小坑笔  
本篇文章主要介绍了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这个属性，然后让其刷新即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS去除字符串的空格增强版(可以去除中间的空格)

    JS去除字符串的空格增强版(可以去除中间的空格)

    之前发了不少了去除字符串空格的代码，但都是去除开始与结尾的，下面的这段代码可以去除中间的。
    2009-08-08
  • Jquery Autocomplete 结合asp.net使用要点

    Jquery Autocomplete 结合asp.net使用要点

    Jquery的Autocomplete是一个很好的智能提示插件，但是在实际使用过程中还是会遇到一些小问题.
    2010-10-10
  • javascript 通用简单的table选项卡实现

    javascript 通用简单的table选项卡实现

    鉴于UI妹妹每次交付过来的选项卡都夹带了多多少少的js，而且每遇到选项卡就加一点js，造成垃圾低劣代码逐渐堆积过多了，一直想做一个通用简洁的选项卡库。
    2010-05-05
  • js实现中文实时时钟

    js实现中文实时时钟

    这篇文章主要为大家详细介绍了js实现中文实时时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • Javascript技术栈中的四种依赖注入详解

    Javascript技术栈中的四种依赖注入详解

    这篇文章主要为大家详细介绍了Javascript技术栈中的四种依赖注入，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 微信小程序实现多张照片上传功能

    微信小程序实现多张照片上传功能

    这篇文章主要介绍了微信小程序实现多张照片上传功能,当服务器的状态码为200且图片上传完毕后将图片的src转化为Json字符串存在数组中以便将其添加到数据库,本文通过实例代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • 如何在TypeScript使用模块化以及注意事项详解

    如何在TypeScript使用模块化以及注意事项详解

    在TypeScript中就像在EC5中一样,任何包含顶级import或export的文件都被认为是一个模块,下面这篇文章主要给大家介绍了关于如何在TypeScript使用模块化以及注意事项的相关资料,需要的朋友可以参考下
    2022-10-10
  • Js 获取Gridview选中行的内容操作步骤

    Js 获取Gridview选中行的内容操作步骤

    本文将介绍一下Js获取Gridview选中行的内容的过程及步骤:取得gridview中获取选中行指定列的值.获取鼠标点击的元素等等，感兴趣的朋友可以了解下，或许对你学习js方面知识有所帮助
    2013-02-02
  • JavaScript实现移动端横竖屏检测

    JavaScript实现移动端横竖屏检测

    这篇文章主要为大家详细介绍了JavaScript实现移动端横竖屏检测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript实现单例模式实例分享

    JavaScript实现单例模式实例分享

    这篇文章主要介绍了JavaScript实现单例模式实例以及代码讲解，有需要的读者们跟着学习参考下吧。
    2017-12-12

最新评论