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

前端之家收集整理的这篇文章主要介绍了详解AngularJS1.6版本中ui-router路由中/#!/的解决方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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的属性添加一个!号就可以了。

完整代码

AngularJS 视图

AngularJS 视图

添加学生

查看学生

解决方案二:

如果想让路由依旧表现的与之前版本的一致可以这样做:

完整代码

AngularJS 视图

AngularJS 视图

添加学生

查看学生

这样浏览器访问时,就不会多出个!号了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/39120.html

猜你在找的JavaScript相关文章