angularjs路由菜单强制刷新$route.reload()

详解AngularJS1.6版本中ui-router路由中#!的解决方法

详解AngularJS1.6版本中ui-router路由中#!的解决⽅法AngularJS 路由是通过 # + 标记帮助我们区分不同的逻辑页⾯并将不同的页⾯绑定到对应的控制器上。

因此在设置好路由规则后，为html页⾯的a标签设置href路由链接切换不同的视图。

Angular1.6版本之前通常有href=“#...”或href=“#/...”这两种写法，结果这两种写法在Angular1.6中没有任何反应。

结果查看了下浏览器地址栏，默认视图链接竟然显⽰“#!/..”,是的，中间多加了个！号。

解决⽅案⼀：所以在html页⾯a标签上将href的属性值添加⼀个！号就可以了。

<p><a href="#!/addStudent" rel="external nofollow" rel="external nofollow" >添加学⽣</a></p><p><a href="#!/viewStudents" rel="external nofollow" rel="external nofollow" >查看学⽣</a></p>完整代码：<html><head><meta charset="utf-8" /><title>AngularJS 视图</title><script src="https:///ajax/libs/angular.js/1.6.1/angular.min.js"></script><script src="https:///ajax/libs/angular.js/1.6.1/angular-route.min.js"></script></head><body><h2>AngularJS 视图</h2><div ng-app="mainApp"><p><a href="#!/addStudent" rel="external nofollow" rel="external nofollow" >添加学⽣</a></p><p><a href="#!/viewStudents" rel="external nofollow" rel="external nofollow" >查看学⽣</a></p><div ng-view></div><script type="text/ng-template" id="addStudent.html"><h2>添加学⽣</h2>{{message}}</script><script type="text/ng-template" id="viewStudents.html"><h2>查看学⽣</h2>{{message}}</script></div><script>var mainApp=angular.module("mainApp",['ngRoute']);mainApp.config(["$routeProvider",function($routeProvider){$routeProvider.when('/addStudent',{templateUrl:'addStudent.html',controller:'AddStudentController'}).when('/viewStudents',{templateUrl:'viewStudents.html',controller:'ViewStudentsController'}).otherwise({redirectTo:'/addStudent'});}]);mainApp.controller("AddStudentController",function($scope){$scope.message="这个页⾯是⽤于显⽰学⽣信息的输⼊表单";});mainApp.controller("ViewStudentsController",function($scope){$scope.message="这个页⾯是⽤于显⽰所有学⽣信息";});</script></body></html>解决⽅案⼆：如果想让路由依旧表现的与之前版本的⼀致可以这样做：mainApp.config(["$locationProvider","$routeProvider",function($locationProvider,$routeProvider){$locationProvider.hashPrefix('');}]);<p><a href="#addStudent" rel="external nofollow" rel="external nofollow" >添加学⽣</a></p><p><a href="#viewStudents" rel="external nofollow" rel="external nofollow" >查看学⽣</a></p>完整代码：<html><head><meta charset="utf-8" /><title>AngularJS 视图</title><script src="https:///ajax/libs/angular.js/1.6.1/angular.min.js"></script><script src="https:///ajax/libs/angular.js/1.6.1/angular-route.min.js"></script> </head><body><h2>AngularJS 视图</h2><div ng-app="mainApp"><p><a href="#addStudent" rel="external nofollow" rel="external nofollow" >添加学⽣</a></p> <p><a href="#viewStudents" rel="external nofollow" rel="external nofollow" >查看学⽣</a></p> <div ng-view></div><script type="text/ng-template" id="addStudent.html"><h2>添加学⽣</h2>{{message}}</script><script type="text/ng-template" id="viewStudents.html"><h2>查看学⽣</h2>{{message}}</script></div><script>var mainApp=angular.module("mainApp",['ngRoute']);mainApp.config(["$locationProvider","$routeProvider",function($locationProvider,$routeProvider){ $locationProvider.hashPrefix('');$routeProvider.when('/addStudent',{templateUrl:'addStudent.html',controller:'AddStudentController'}).when('/viewStudents',{templateUrl:'viewStudents.html',controller:'ViewStudentsController'}).otherwise({redirectTo:'/addStudent'});}]);mainApp.controller("AddStudentController",function($scope){$scope.message="这个页⾯是⽤于显⽰学⽣信息的输⼊表单";});mainApp.controller("ViewStudentsController",function($scope){$scope.message="这个页⾯是⽤于显⽰所有学⽣信息";});</script></body></html>这样浏览器访问时，就不会多出个！号了。

JS强制刷新页面多种方法

<body onUnload="opener.location.reload()"> 关闭时刷新
<script language="javascript">
window.opener.document.location.reload()
</script>
//跳出页面
<SCRIPT LANGUAGE=JAVASCRIPT>
3. Response.Write("<script language=javascript>opener.window.navigate(’’你要刷新的页.asp’’);</script>")
JS刷新框架的脚本语句
//如何刷新包含该框架的页面用
<script language=JavaScript>
parent.location.reload();
</script>
//子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
( 或 <a href="javascript:opener.location.reload()">刷新</a> )
//如何刷新另一个框架的页面用
<script language=JavaScript>
parent.另一FrameID.location.reload();
</script>

详解AngularJS路由resolve用法

详解AngularJS路由resolve⽤法ng-route模块中的when()和ui-route的state()都提供了resolve属性。

为什么需要使⽤resolve？当路由切换的时候，被路由的页⾯中的元素（标签）就会⽴马显⽰出来，同时，数据会被准备好并呈现出来。

但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，⽽后再呈现出数据。

这样就会导致页⾯会被渲染两遍，导致“页⾯UI抖动”的问题，对⽤户不太友好。

resolve的出现解决了这个问题。

resolve是⼲嘛⽤的resolve属性⾥的值会在路由成功前被预先设定好，然后注⼊到控制器中。

通俗地将，就是等数据都“就位”后，才进⾏路由（其实我觉得也不能叫路由，因为路由是⼀些列的操作，其中就包括了设置resolve属性等等）。

这样的好处就是页⾯仅会被渲染⼀遍。

<div ng-app="myApp"><div><a ui-sref = "index">前往list.html</a></div><div ui-view></div></div><!--list.html><div><h1>HI,这⾥是list.html</h1><a ui-sref="index.list">点击加载list.html视图</a><div ui-view></div><h1>{{user}}</h1><h2>{{name}}</h2><h3>{{age}}</h3><h3>{{email}}</h3></div>//JSvar app = angular.module('myApp',['ui.router']);app.config(["$stateProvider",function($stateProvider){$stateProvider.state("index",{url:'/',templateUrl:'list.html',controller:'myController',resolve:{user:function(){return {name:"perter",email:"826415551@",age:"18"}}}})}]);app.controller('myController',function($scope,user){$=;$scope.age=user.age;$scope.email=user.email;$er=user;});我在state⽅法⾥⾯设置了resolve属性，⾥⾯的值是⼀个名为user的对象，它存有⼏个值（格式好像JSON）。

vue-admin-template项目刷新回到指定页面的方法

vue-admin-template项目刷新回到指定页面的方法
要实现在刷新后回到指定页面，可以通过以下步骤进行操作：
1. 在需要回到的页面中，利用`localStorage`将该页面的路由信息存储下来。

例如，在 `created` 钩子函数中添加如下代码：
```javascript
created() {
// 存储当前页面的路由信息
localStorage.setItem('lastVisitedPage', this.$route.path);
}
```
2. 在项目的根文件 `src/main.js` 中，添加路由导航的全局前置守卫。

在该守卫中检查 `localStorage` 中是否有存储的上一次访问的页面信息，如果有，则将路由重定向到该页面。

代码示例如下：
```javascript
router.beforeEach((to, from, next) => {
const lastVisitedPage = localStorage.getItem('lastVisitedPage'); if (lastVisitedPage && lastVisitedPage !== '/login') {
// 重定向到上一次访问的页面
next({ path: lastVisitedPage });
} else {
next();
}
});
```
这样，在刷新页面后会自动将路由重定向到上一次访问的页面。

注意：上述代码仅适用于基于 Vue Router 的单页面应用。

js刷新当前页面代码

js刷新当前页面代码复制代码代码如下:1，history.go(0)2，location.reload()3，location=location4，location.assign(location)5，document.execCommand('Refresh')6，window.navigate(location)7，location.replace(location)8，document.URL=location.href自动刷新页面的方法:1，页面自动刷新：把如下代码加入<head>区域中复制代码代码如下:<meta http-equiv="refresh" content="20">其中20指每隔20秒刷新一次页面.2，页面自动跳转：把如下代码加入<head>区域中复制代码代码如下:<meta http-equiv="refresh" content="20;url="> 其中20指隔20秒后跳转到页面3，页面自动刷新js版复制代码代码如下:<script language="JavaScript">function myrefresh(){window.location.reload();}setTimeout('myrefresh()',1000); //指定1秒刷新一次</script>4，JS刷新框架的脚本语句复制代码代码如下://刷新包含该框架的页面用<script language=JavaScript>parent.location.reload();</script>//子窗口刷新父窗口<script language=JavaScript>self.opener.location.reload();</script>(或<a href="javascript:opener.location.reload()">刷新</a> )//刷新另一个框架的页面用<script language=JavaScript>parent.另一FrameID.location.reload();</script>如果想关闭窗口时刷新或想开窗时刷新，在<body>中调用以下语句即可。

JS强制刷新页面、清除缓存刷新

JS强制刷新页⾯、清除缓存刷新清理⽹站缓存的⼏种⽅法meta⽅法<meta http-equiv="pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache, must-revalidate"><meta http-equiv="expires" content="0">清理form表单的临时缓存<body onLoad="javascript:document.yourFormName.reset()">jquery ajax清除浏览器缓存⽅式⼀：⽤ajax请求服务器最新⽂件，并加上请求头If-Modified-Since和Cache-Control,如下:$.ajax({url:'',dataType:'json',data:{},beforeSend :function(xmlHttp){xmlHttp.setRequestHeader("If-Modified-Since","0");xmlHttp.setRequestHeader("Cache-Control","no-cache");},success:function(response){//操作}async:false});⽅法⼆，直接⽤cache:false,$.ajax({url:'',dataType:'json',data:{},cache:false,ifModified :true ,success:function(response){//操作}async:false});⽅法三：⽤随机数，随机数也是避免缓存的⼀种很不错的⽅法！URL 参数后加上 "?ran=" + Math.random(); //当然这⾥参数 ran可以任意取了⽅法四：⽤随机时间，和随机数⼀样。

AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

AngularJS下拉列表select在option动态变化之后多出了⼀个错误项的问题场景：Select初始化之后，选中select的某个选项通过AngularJS更新select的选项错误写法：HTML(使⽤ng-repeat) <div ng-app="TestApp"><div ng-controller="TestAppCtrl"><label>options变化之后会出错：</label><select ng-model="selectedSite"><option value="">---请选择---</option><option ng-repeat="site in sites" value="{{site.url}}">{{}}</option></select><input type="button" ng-click="reload()" value="更新"></div><div>var testApp = angular.module('TestApp', []);testApp.controller('TestAppCtrl', ['$scope',function($scope) {var sites=[{"url":"","name":"百度"},{"url":"","name":"⾕歌"},{"url":"","name":"雅虎"},]var sites2=[{"url":"","name":"GMAIL"},{"url":"","name":"ABC"},{"url":"","name":"XYZ"},]var Init = function(){$scope.sites=sites;}var Reload = function(){$scope.sites=sites2;} //加载页⾯之后初始化Init(); //注册更新按钮的点击事件，点击之后更新select的option列表$scope.reload=Reload;}]);按照场景描述的步骤操作之后，下拉菜单变成如下所⽰（多出了⼀个option，option的value和步骤⼀所选的选项有关，我第⼀步选了“百度”）：正确写法：HTML(使⽤ng-options)， javascript不变<div ng-app="TestApp"><div ng-controller="CorrectedAppCtrl"><label>正确写法：</label><select ng-model="selectedSite" ng-options="site as for site in sites track by site.url"><option value="">---请选择---</option></select><input type="button" ng-click="reload()" value="更新"></div><div>官⽅⽂档说这两种⽅式都可以实现下拉列表，也说了⼀些ngOptions优于ngRepeat的点。

angular清除路由参数

angular清除路由参数【原创版】目录1.什么是路由参数2.路由参数的作用3.如何清除路由参数4.清除路由参数的优点5.结论正文一、什么是路由参数路由参数是指在 URL 中用于表示某个具体路由的参数，通常是在URL 的查询字符串中表示。

例如，当我们访问一个详细页面时，URL 可能长这样：`/products/123`，这里的`123`就是一个路由参数，它代表了具体的产品 ID。

二、路由参数的作用路由参数的主要作用是用于在服务器端识别和解析具体的请求，以便将请求映射到相应的数据和视图。

在单页面应用（SPA）中，路由参数可以用于动态加载和更新页面内容，提高用户体验。

三、如何清除路由参数在 Angular 框架中，要清除路由参数，可以使用`location.replaceState()`方法。

该方法接受三个参数：当前路由参数的键、要替换的值和新的 URL。

例如，假设我们有一个路由参数`productId`，我们想要将其清除，可以这样操作：```javascript$state.replaceState("productId", null, "/products");```四、清除路由参数的优点清除路由参数的主要优点是可以提高网站的 SEO 性能。

因为搜索引擎爬虫在抓取网页时，通常会忽略 URL 中的查询字符串，所以清除路由参数可以使网页的 URL 更加简洁，有利于搜索引擎的抓取和索引。

五、结论综上所述，作为 Angular 开发者，我们有多种方法可以清除路由参数，这对于提高网站的 SEO 性能是非常有益的。