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

 问题描述:

  之前项目是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. eslint 配置及规则说明

    中文官方网站 安装 可以全局安装,也可以在项目下面安装. 如下是在项目中安装示例,只需要在 package.json 中添加如下配置,并进行安装: “eslint”: “^4.11.0” 配置 配置方 ...

  2. tomcat设置默认欢迎页、server.xml配置文件中的标签理解

    一:要求:输入网址,不加文件名便可以访问默认页面 (1)项目中只有静态文件 方法:更改tomcat下的conf目录下的web.xml文件,如下图: <welcom-file-list>元素 ...

  3. spring + mybatis 存取clob

    存的时候会比较麻烦,需要使用select for update的方式更新数据,如果原来没有这一条数据,还需要先新增,新增的时候需要将clob字段存为oracle.sql.CLOB.empty_lob( ...

  4. (转)MVC 与三层架构

    原文:https://juejin.im/post/5929259b44d90400642194f3 MVC 与三层架构 一.简述 在软件开发中,MVC与三层架构这两个专业词汇经常耳闻,同时总有很多人 ...

  5. Google Protocol Buffers 入门

    Google Protocol Buffers 是一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化.它很适合做数据存储或 RPC 数据交换格式.可用于通讯协议.数据存储等领域的 ...

  6. centos 7 Mysql5.7 主从复制配置

    1.环境 Centos 7 Mysql 5.7 Master  192.168.1.71 Slave01 192.168.1.72 2.分别配置master,slave01 # vi /etc/my. ...

  7. 将本地代码提交到github

    最近练习了freemarker 做了个代码生成工具,想提交到github上,在本地进行了提交,执行如下些命令 git init git add . * git commit -m "comm ...

  8. Iptables之recent模块小结

    Iptables的recent模块用于限制一段时间内的连接数, 是谨防大量请求攻击的必杀绝技! 善加利用该模块可充分保证服务器安全. recent常用参数--name      设定列表名称,即设置跟 ...

  9. SOA和微服务架构的区别?

    转自知乎:https://www.zhihu.com/question/37808426/answer/93335393 SOA和微服务架构的区别? 微服务架构强调的第一个重点就是业务系统需要彻底的组 ...

  10. 【JS】for in循环对象,hasOwnProperty()的作用

    var obj = { name:"echolun", age:", sex:"male" }, objName=[], //用来装对象属性名 obj ...