详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )
AngularJS 路由 是通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。因此在设置好路由规则后，为html页面的a标签设置href路由链接切换不同的视图。Angular1.6版本之前通常有href=“#...”或href=“#/...”这两种写法，结果这两种写法在Angular1.6中没有任何反应。
结果查看了下浏览器地址栏，默认视图链接竟然显示“#!/..”,是的，中间多加了个！号。
AngularJS升级到了1.6版本后，里面多了很多/#!/的改动。那么1.6究竟做了哪些改变呢？可以参考这个：https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52
解决方案一：
所以在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="/UploadFiles/2021-04-02/angular.min.js">
解决方案二：
如果想让路由依旧表现的与之前版本的一致可以这样做：
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="/UploadFiles/2021-04-02/angular.min.js">
这样浏览器访问时，就不会多出个！号了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：JS实现上传图片实时预览功能
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。