Angular刷新浏览器 404 问题
最近在用angular写一个后台的项目,遇到一个小问题。
进入某个路由页面之后,手动触发浏览器的刷新,然后就404了。。。
翻看Angular的文档,发现Google早已经给我们想到了这个问题的处理方案
那就是Angular的hash风格的url,就是在浏览器的url里面加入一个#号

这样刷新的话,浏览器会忽略url的#号后面的,,等页面价值完成之后,才会再次处理#号。
如果我没记错的话,在非spa网页程序里面#是用于网页锚点处理。但是在spa程序里面,#居然还可以这么用,真是佩服Google工程师的脑洞啊
处理方式也很简单:
在app.module.ts里面引入hash风格的库
import { HashLocationStrategy, LocationStrategy } from "@angular/common";
然后再放到provider里面去
providers: [ {
provide: LocationStrategy,
useClass: HashLocationStrategy
}]
再次在Vscode里面保存一下,webpack会自动重新编译并刷新浏览器。这时候,url的风格就成了一个带#的,这时候随便怎么刷新浏览器,都能正常了
Angular刷新浏览器 404 问题的更多相关文章
- 解决angular2页面刷新后报404错误
如果你的angular项目部署到一个tomcat容器里面,localhost:8080是JavaWeb的主页,localhost:8080/driver/login是你angular2项目的登陆地址. ...
- gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全
gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...
- 更为简单的Ctrl+S自动刷新浏览器工具-LinrF5
一款自动刷新浏览器的小工具,它通过监听用户的按键,如果在键盘按下 Ctrl+S ,则自动刷新浏览器,操作十分简单,前端开发必备神器,快速提升工作效率,支持IE.火狐以及最新版的chrome33.之前我 ...
- 哇 真的是一个好插件!!!Sublime Text编辑文件后快速刷新浏览器
http://9iphp.com/web/html/sublime-text-refresh-browser.html这篇博文咯 来源:[Tips]Sublime Text编辑文件后快速刷新浏览器 - ...
- Sumlime Text编辑文件后快速刷新浏览器
作为Web开发人员,我们经常会这么做:在编辑器中调整代码,保存文件,切换到浏览器,然后刷新浏览器页面来查看结果.在代码编辑过程中,我们需要重复进行很多次这些操作. 如果你使用的是Sublime Tex ...
- 利用less监视模式实时预览样式刷新浏览器
[前言]此处介绍的方法只是我个人的用法,相信大家有更好更简洁的方式. 上次写到利用LiveReload解放F5.而且LiveReload可以编辑sass/less/stylus.但是可惜发现LiveR ...
- npm scripts 助力前端开发,实时刷新浏览器
用browser-sync或者lite-server来监控文件的改变,当文件改变时,就自动刷新浏览器. 用node-sass来实时编译scss文件. 用parallelshell来异步执行npm sc ...
- struts2中修改Action后刷新浏览器后不能及时更新
在学习strut2的时候,发现如果修改配置文件中Action的时候,刷新浏览器并不能加载修改后的Action,只能关闭服务,重新开启server才能获取到,上网找了许多资料后发现只要在配置文件中加上下 ...
- 分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器
http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...
随机推荐
- springboot 学习之路 5(打成war包部署tomcat)
目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...
- windows虚拟内存机制
在windows系统中个,每个进程拥有自己独立的虚拟地址空间(Virtual Address Space).这一地址空间的大小与计算机硬件.操作系统以及应用程序都有关系. 对于32位程序来说,最多能使 ...
- 账号配置vue版本的扫码下单以及对店铺进行装修的步骤
新版vue配置说明文档 管理员后台: 1.配置管理-店铺配置(子账号)-扫码点餐tab页-开启vue版 2.配置管理-店铺配置(主账号)-扫码点餐tab页-开通装修配置 商家后台: 1.主账号-门店设 ...
- gif软件(ShareX)
介绍 官网:https://getsharex.com/ 开源,免费的一款软件,录制GIF功能简单,按下快捷键,选取指定的区域即可进行录制,录制完成后的文件默认存放在个人文件夹,整个过程几乎几打断你的 ...
- web测试笔记
WEB兼容性测试 一.客户端兼容性 1.浏览器的兼容性测试 a.内核角度 Tridnt内核:代表作IE.腾讯.遨游.世界之窗等 Gecko内核:代表作Firefox webkit内核:代表作Safar ...
- 持续集成-Jenkins安装部署
1. 安装JDK[java8] 1.1. 软件安装 [yun@mini05 software]# pwd /app/software [yun@mini05 software]# .0_112.tar ...
- Spring的AOP基于AspectJ的注解方式开发3
上上偏博客介绍了@Aspect,@Before 上篇博客介绍了spring的AOP开发的注解通知类型:@Before,@AfterThrowing,@After,@AfterReturning,@Ar ...
- Glyphicons 字体图标
- ES5-ES6-ES7_字符串与JOSN格式的数据相互转换以及深度克隆新对象
这篇文章主要来讲HTML5中的新方法:parse()把字符串转换成josn格式的数据和stringify()把josn格式的数据转换成字符串 eval()方法的回顾 eval()方法可以将任何字符串解 ...
- 设计模式のMediatorPattern(中介者模式)----行为模式
一.产生背景 从生活中的例子可以看出,不论是QQ游戏还是QQ群,它们都是充当一个中间平台,QQ用户可以登录这个中间平台与其他QQ用户进行交流,如果没有这些中间平台,我们如果想与朋友进行聊天的话,可能就 ...