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这个属性,然后让其刷新即可。
vue-router重定向 不刷新问题的更多相关文章
- Vue Router 常见问题(push报错、push重复路由刷新)
Vue Router 常见问题 用于记录工作遇到的Vue Router bug及常用方案 router.push报错,Avoided redundant navigation to current l ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
- Vue Router详细教程
1.什么是路由 1.1路由简介 说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 额,啥玩意? 没听 ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- vue——router
1.不同界面传参 <router-link :to="{path:'地址'},query:{name:val}">, 其它界面获取: this.$route.query ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
随机推荐
- C#连接Access2013
今天测试连接Access2013数据库,遇到错误,综合几个大神建议,解决了 我的系统是windows 2008 64位的,连接字符串如下: <connectionStrings> < ...
- postgresql-定时备份,压缩备份
crontab -e 在最后添加: # backup database at 22:00 every day 0 22 * * * thunisoft /home/eric/bin/backup-db ...
- Oracle数据库中NARCHAR转换成NUMBER类型
1.修改后的代码: public void addDirectorActorKeyword(long idStart, long idEnd) { SeriesMgr seriesMgr = new ...
- 小程序/js监听输入框验证金额
refundAmoutInput: function(event){ var value = event.detail.value; if (value.split('.')[0].length &g ...
- tensorflow进阶篇-4(损失函数3)
Softmax交叉熵损失函数(Softmax cross-entropy loss)是作用于非归一化的输出结果只针对单个目标分类的计算损失.通过softmax函数将输出结果转化成概率分布,然后计算真值 ...
- php完美匹配邮箱、链接地址和电话号码
php完美匹配邮箱.链接地址和电话号码 写了好一会有问题,朋友这边很好功能,借用了.嘎嘎 //31日 更新: 匹配手机以及电话号码 重新修改,可支持18开头的手机号,并修改bug,可匹配出字符串中所有 ...
- Editplus php
一.配置PHP帮助手册 1.打开Editplus,[工具]-->[配置用户工具],在[添加工具]子菜单下选择[HTML帮助(*.chm)(T)],文件路径选择php的chm帮助文件路径. 这样在 ...
- Django使用Signals监测model字段变化发送通知
上一篇文章<运维效率之数据迁移自动化>中讲到了工单通知,本文将介绍工单通知实现过程中的一些小技巧.所有演示均基于Django2.0 阅读此篇文章你可以: 解锁一个python if的使用新 ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(七):集成 Druid 数据源
数据库连接池负责分配.管理和释放数据库连接,它允许应用程序重复使用一个现有的数据库连接,而不是再重新建立一个:释放空闲时间超过最大空闲时间的数据库连接来避免因为没有释放数据库连接而引起的数据库连接遗漏 ...
- Linux交换空间和内存不足
交换空间 交换技术就是将一页内存复制到预先设定的硬盘上的交换空间,来释放该页占用内存.物理内存和交换空间的和就是可提供的虚拟内存的总量.Linux有两种形式的交换方式,分别是交换分区,交换文件. 优点 ...