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

 问题描述:

  之前项目是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. sudoer命令各参数含义及设置

    对于普通用户sudo加权的时限制可以执行的命令 https://segmentfault.com/a/1190000007394449 需要修改/etc/sudoers 1. 字段说明如下 授权用户/ ...

  2. CentOS 设置 oracle 开机自动启动

    CentOS 设置 oracle 开机自动启动 1. [root@localhost ~]# gedit /etc/oratab 文件内容为: # # This file is used by ORA ...

  3. java爬虫学习

    一.java爬取数据 示例:爬取网站中的所有古风网名:http://www.oicq88.com/gufeng/,并储存入数据库(mysql) jdk版本:jdk1.8 编辑器:idea 项目构建:m ...

  4. SpringBoot配置文件application.properties详解

    喜欢的朋友可以关注下,粉丝也缺. 相信很多的码友在接触springboot时,不知道怎么去配置一些项目中需要的配置,比如数据源,tomcat调优,端口等等,下面我就给大家奉献出一些项目中常用的配置信息 ...

  5. Selenium3 + Python3自动化测试系列三——控制浏览器操作

    控制浏览器操作 控制浏览器窗口大小 在测试过程中,我们在打开浏览器后,根据需求可自定义调整浏览器的尺寸大小.WebDriver提供了set_window_size()方法来设置浏览器的大小. 如果页面 ...

  6. vue-cli项目配置文件分析

    最近在vue-cli生成的webpack模板项目的基础上开发了一些项目,开发过程中遇到很多坑,并且需要改动build和config里面一些相关的配置,查阅,学习,总结,分享. 一.配置文件结构 本文主 ...

  7. JDK提供的四种线程池代码详解

    一.线程池什么时候使用,会给我们带来什么好处? 如果很多用户去访问服务器,用户访问服务器的时间是非常短暂的,那么有可能在创建线程和销毁线程上花费的时间会远远大于访问所消耗的时间,如果采用线程池会使线程 ...

  8. Apater适配器模式(结构型模式)

    1.概要 适配:即在不改变原有实现的基础上,将原先不适合的接口转换成适合的接口. what is Apater?适配,这个概念在生活中无处不在,比如你的iphone 4手机充电器坏了,这是时候只有一个 ...

  9. godaddy 问题

    1. 域名被锁,打电话咨询后.说发送被锁的域名到: change@secureserver.net 去解锁.

  10. 【转】谷歌三大核心技术(一)The Google File System中文版

      The Google File System中文版 译者:alex 摘要 我们设计并实现了Google GFS文件系统,一个面向大规模数据密集型应用的.可伸缩的分布式文件系统.GFS虽然运行在廉价 ...