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

 问题描述:

  之前项目是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重定向 不刷新问题的更多相关文章

  1. Vue Router 常见问题(push报错、push重复路由刷新)

    Vue Router 常见问题 用于记录工作遇到的Vue Router bug及常用方案 router.push报错,Avoided redundant navigation to current l ...

  2. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  3. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  4. Vue Router详细教程

    1.什么是路由 1.1路由简介 说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 额,啥玩意? 没听 ...

  5. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  6. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  7. vue——router

    1.不同界面传参 <router-link :to="{path:'地址'},query:{name:val}">, 其它界面获取: this.$route.query ...

  8. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  9. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  10. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

随机推荐

  1. C#6.0语言规范(十六) 异常

    C#中的异常提供了一种结构化,统一且类型安全的方法来处理系统级和应用程序级错误条件.C#中的异常机制与C ++的异常机制非常相似,但有一些重要的区别: 在C#中,所有异常必须由派生自的类类型的实例表示 ...

  2. 【UML】:时序图

    时序图表达了类之间调用关系,以及调用时序关系. Actor: 调用者实例化类的对象,执行者. Lifeline: 生命线,竖的虚线.上方方框是类名表示存在的时间,从上至下表示时间流逝.Lifeline ...

  3. postgresql-shared_buffers调整

    shared_buffers大小调整: http://www.rummandba.com/2011/02/sizing-sharedbuffer-of-postgresql.html SELECT  ...

  4. django安装与环境调配

    91.查看当前已有虚拟环境 2.进入虚拟环境 3.退出当前虚拟环境 4.创建python隔离环境前先可用此先查看已经拥有什么版本的python 5.创建一个名为first的python隔离环境 6.安 ...

  5. 副本集mongodb 无缘无故 cpu异常

    mondb 服务器故障 主从复制集 主:   192.168.1.106从:   192.168.1.100仲裁:192.168.1.102 os版本:CentOS Linux release 7.3 ...

  6. 检查iOS项目中是否使用了IDFA

    (1)什么是IDFA 关于IDFA,在提交应用到App Store时,iTunes Connect有如下说明:   这里说到检查项目中是否包含IDFA,那如何来对iOS项目(包括第三方SDK)检查是否 ...

  7. Python 百度ai身份证接口案例

    调用百度Ai 完成一个学生信息录入的网页小案例 添加图片,身份证信息对号入座 官方文档中心:https://ai.baidu.com/docs#/OCR-API/7e4792c7 utils.py # ...

  8. KVM的VPS主机在Centos6.x下修改系统时间

    显示系统时间 # date "+%Y-%m-%d %H:%M:%S" 修改系统时区 # cp /usr/share/zoneinfo/Asia/Shanghai /etc/loca ...

  9. (转)OpenSSL CVE-2016-0800 和 CVE-2016-0703 漏洞修复细节拾趣

    原文:https://www.freebuf.com/vuls/97727.html 1. 引子 本来最近和360 Nirvan Team的DQ430愉快的参加某加密厂商的年度大会,结果openssl ...

  10. git status的用法

    git status 用于查看工作区与暂存区的已tracked及untracked的所有文件status. 以下为help结果. git help status NAME git-status - S ...