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组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...
随机推荐
- BitnamiRedmine配置邮件系统备忘
前几天安装的Redmine邮件系统存在问题,需要换一个,方法记录如下: 修改配置文件: cd ~/redmine/apps/redmine/htdocs/config vi configuration ...
- katalon之web文件上传
参考:https://docs.katalon.com/katalon-studio/docs/webui-upload-file.html#example- 适用范围:tag=input, type ...
- CSS杂谈(1)图
- mssql sql server ceiling floor 函数用法简介
摘自: http://www.maomao365.com/?p=5581摘要: 下文主要讲述ceiling.floor函数的功能及举例说明 一.ceiling floor函数功能简介 ceiling ...
- 孟岩:怎么看待Coin与Token的关系?
由于中英文的隔阂,很多在英文世界里一目了然.不言自明的词汇,翻译成中文之后意义模糊.难以理解.比如在区块链和加密数字货币领域,coin 和 token 的区别,很长时间困扰着我们,并且引发争论. 后来 ...
- 归并排序python实现
归并排序python实现 归并排序 归并排序在于把序列拆分再合并起来,使用分治法来实现,这就意味这要构造递归算法 首先是一个例子 原序先通过一半一半的拆分,然后: 然后再一步一步的向上合并,在合并的过 ...
- vs2010 2013 2015 有用各种功能插件
https://blog.csdn.net/daydayup_chf/article/details/80803221
- Linux 小知识翻译 - 「cron」
这次说说「cron」. 「cron」就是「定期自动执行任务的工具」(相当于windows中的计划任务).读做「库隆」.使用「cron」,可以预先指定任务在某个时间执行. 时间的指定并不只是「一小时一次 ...
- 力扣算法题—069x的平方根
实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. 示例 1: 输入: 4 输出: 2 示例 ...
- 如何使用微信web开发者工具调试企业微信
最近因工作需要围绕着企业微信来进行调试,从而掏出了我的微信web开发者工具,在进行授权的时候微信web开发者工具成功的提示了我:“您未绑定企业微信开发者权限”.那么关键来了,因为我也百度过,发现也有很 ...