AngularJS路由是通过# 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。因此在设置好路由规则后，为超文本标记语言页面的a标签设置href路由链接切换不同的视图角度1.6版本之前通常有href="# . "或href="#/. "这两种写法，结果这两种写法在Angular1.6中没有任何反应。

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

AngularJS升级到了1.6版本后，里面多了很多/#!/的改动。那么1.6究竟做了哪些改变呢？可以参考这个：https://github。com/angular/angular。js/commit/aa 077 e 81129 c 740041438688 dff 2e 8d 20 C3 D7 b 52

解决方案一：

所以在超文本标记语言页面a标签上将href的属性值添加一个！号就可以了。

pa href='#！/addStudent ' rel='外部不跟随' rel='外部不跟随'添加学生/a/p pa href='#！/查看学生' rel='外部不跟随' rel='外部不跟随'查看学生/a/p完整代码：

超文本标记语言头元字符集='utf-8'/titleAngularJS视图/title脚本src=' http :https://cdnjs。云耀斑。com/Ajax/libs/angular。js/1。6 .1/棱角分明。量滴js '/script script src=' http :https://cdnjs。云耀斑。com/Ajax/libs/angular。js/1。6 .1/角度路线。量滴js '/脚本/头体h2angular js视图/H2 div ng-app=' mainApp ' pa href=' #！/addStudent ' rel='外部不跟随' rel='外部不跟随'添加学生/a/p pa href='#！/查看学生' rel='外部不跟随' rel='外部不跟随'查看学生/a/p分区ng-视图/分区脚本类型=' text/ng-template ' id=' addstudent。html ' H2添加学生/h2 {{message}} /script脚本类型=' text/ng-template ' id='查看学生。html ' H2查看学生/H2 { { message } }/script/div script var mainApp=angular。模块(' mainApp '，[' ngRoute '])；mainapp。config([' $ RouterProvider '，function($ RouterProvider){ $ RouterProvider。当('/addStudent '，{ templateurl : ' addStudent。html '，控制器： ' AddStudentController ' }).当('/viewStudents '，{ template URL : '查看学生时。html '，控制器： '查看学生控制器' }).否则({ redirectto : '/AddStudent ' })；}]);mainapp。控制器(' AddStudentController '，函数($scope){ $scope.message='这个页面是用于显示学生信息的输入表单；});主应用程序。控制器(' viewsentcontroller '，函数($scope){ $scope.message='这个页面是用于显示所有学生信息；});/脚本/正文/html解决方案二：

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

mainapp。config([' $ location provider '，' $routeProvider '，function($locationProvider，$ routeProvider){ $ location provider。hashprefix(')；}]);pa href=' # addStudent ' rel=' external nofollow ' rel=' external nofollow '添加学生/a/p pa href=' # view students ' rel=' external no follow ' rel=' external no follow '查看学生/a/p完整代码：

超文本标记语言头元字符集='utf-8'/titleAngularJS视图/title脚本src=' http :https://cdnjs。云耀斑。com/Ajax/libs/angular。js/1。6 .1/棱角分明。量滴js '/script script src=' http :https://cdnjs。云耀斑。com/Ajax/libs/angular。js/1。6 .1/角度路线。量滴js '/脚本/头体h2angular js视图/H2 div ng-app=' mainApp ' pa href=' # addStudent ' rel='外部不跟随' rel='外部不跟随'添加学生/a/p pa href=' # view students ' rel=' external no follow ' rel=' external no follow '查看学生/a/p分区ng-视图/分区脚本类型=' text/ng-template ' id=' addstudent。html ' H2添加学生/h2 {{message}} /script脚本类型=' text/ng-template ' id='查看学生。html ' H2查看学生/H2 { { message } }/script/div script var mainApp=angular。模块(' mainApp '，[' ngRoute '])；mainapp。config([' $ location provider '，' $routeProvider '，function($locationProvider，$ routeProvider){ $ location provider。hashprefix(')；$ RouteProvider。当('/AddStudent '，{ Templateurls : ' AddStudent。html '，控制器： ' AddStudentcontroller ' }).当('/viewStudents '，{ template URL : '查看学生时。html '，控制器： '查看学生控制器' }).否则({ redirectto : '/AddStudent ' })；}]);mainapp。控制器(' AddStudentController '，函数($scope){ $scope.message='这个页面是用于显示学生信息的输入表单；});主应用程序。控制器(' viewsentcontroller '，函数($scope){ $scope.message='这个页面是用于显示所有学生信息；});/脚本/正文/html这样浏览器访问时，就不会多出个！号了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。