zoukankan      html  css  js  c++  java
  • 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这个属性,然后让其刷新即可。

  • 相关阅读:
    Win8 消费者预览版中文版下载地址 官方原版
    Easyui datagrid加载本地Json数据
    myeclipse 8.510.0 安装 svn 方法
    easyui tree使用方法
    安装Oracle 11g r2先决条件检查失败解决方法
    Win8/Win7或XP 双系统安装图文教程
    Oracle存储过程与函数
    MyEclipse 中 使用 TortoiseSVN(1)
    MyEclipse 中 使用 TortoiseSVN(2)
    easyui使用Ajax提交表单,返回Json数据
  • 原文地址:https://www.cnblogs.com/cjh1111/p/9187032.html
Copyright © 2011-2022 走看看