window.location.assign("http://www.mozilla.org"); // or window.location = "http://www.mozilla.org";
window.location.reload(true);
function reloadPageWithHash() { var initialPage = window.location.pathname; window.location.replace('http://example.com/#' + initialPage); }
1. reload方法用于刷新当前文档,不从缓存中读取,走一遍服务器。使用reload页面内的表单可能会重新提交
2. replace 指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。 页面内的表单不会重新提交
1. F5和crtl+R是软刷,发送空的头,如果页面打开过服务器会返回302,走缓存
2. ctrl+F5 重走服务器,页面会返回200,不走缓存
你可能不在意这个,但是你总会用到
function sendData (sData) { window.location.search = sData; }
我总会拼接url?...来发送请求。其实是一样的道理
<nav> <a routerLink="/home"></a> //1 <a [routerLink]="['/home',username]"></a>// 2 </nav>
通过roterLink不会刷新目前页面,只会根据routerLink改变浏览器的hash,导向对应的视图
routerLink可以接受一个数组,来动态的改变url的值,以便我们传递特定的Url信息
实际开发中我们可能需要以下的场景就是,我们要知道当前页面激活的是哪一个路由。然后对应的给某个激活的链接一个特殊的状态类似与
图一
我们需要以下操作
<a routerLink='/routerBlock' routerLinkActive="active">路由与导航</a>
实际项目中我们可能希望自己通过js来后台控制跳转
// 我们需要把Router这个对象注入组件中,通过这个对象进行跳转 explort class Acomponent{ constructor( private router:Router ){} }
图二
后台通过逻辑来进行跳转
注意:如果在Acomponent组件中使用navicate,如果利用jumpTomanger改变参数跳转当前页面,浏览器中的url和参数都不会改变,但是这个路由对象确实变化了,我们可以通过ActivatedRoute这个对象监听到变化
原因:navicate 是基于参数来改变组件视图
navicateByUrl()和navicate()相对的,navicateByUrl是真实的改变浏览器Url来改变视图
下面我们来看一个例子
浏览器的URL是 /classify/11/article/22(childComponent:com1)
通过router.navicate('/classify/22/aricle/33')
此时浏览器URL /classify/22/article/33(childComponent:com1)
通过router.navicateByUrl('/classify/22/aricle/33')
此时浏览器URl /classify/22/aricle/33