谈谈ngRoute路径出现#!#问题怎么解决？

文章2023-03-3165 人已阅来源：网络

本篇文章给大家介绍一下ngRoute路径出现#!#解决方案。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

谈谈ngRoute路径出现#!#问题怎么解决？

相关推荐：《angularjs教程》

在做一个开源项目的时候，使用了"angular-route": "^1.6.4"，发现设置了<a>标签的href后，点击后路径出现的不是#/，而是#!#。然而我并没有设置hashPrefix。

<a href="#about" class="ng-binding">About</a>

点击标签后地址栏中出现：http://localhost:9000/#!#about。

打印一下$location。

谈谈ngRoute路径出现#!#问题怎么解决？

发现我们设置的$location中，并没有像预期的那样是显示在伪url的path部分，而是跑到hash部分。

原因是：在route版本>1.6.0的时候，默认的hashPrefix被修改为了‘!’。

相当于以下代码

$locationProvider.hashPrefix('!');

下面提供有两种解决方案：

1、把hashPrefix恢复为1.6以前的版本那样。

$locationProvider.hashPrefix('');

2、改变一下href的格式

<a href="#!about" class="ng-binding">About</a>

还有一点需要注意的是，一旦引进了ngRoute，那么<a>标签就好像被ngRoute重写默认行为了一样，一旦href以#开头，那么它会在url的hash部分添加一个/，而不是直接将字符串附加到#之后，所以类似<a href="#about">就不能够跳转到id="about"的标签了。我研究了一下，可以写一个指令，然后调用window.location.hash来解决这个问题。

html

<a goto="#about" href="#about" class="ng-binding">About</a>

js

define(['app'], function (app) {
	app.directive('goto', function () {
		return function ($scope, $elem, $attrs) {
			$elem.click(function () {
				//console.log($attrs.goto.substring(1));
				window.location.hash = $attrs.goto.substring(1);
			});
		};
	});
});

备注：上面的define是requireJS定义一个模块。

更多编程相关知识，请访问：编程教学！！

以上就是谈谈ngRoute路径出现#!#问题怎么解决？的详细内容！

相关内容

详解Angular中的模板输入变量（let-变量）
本篇文章带大家了解一下Angular中的模板输入变量（let-变量）。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。我这个人，写文章或者说心得，不喜欢直接抄官...
详解Angular中的组件交互
本篇文章带大家详细介绍一下Angular组件交互。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。Angular组件交互组件交互：组件通讯，让两个或多个组件之间...
浅谈angular中@、=、&指令的差异
本篇文章带大家了解一下angular指令中@，=，&的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。【相关推荐：《angular教程》】当dir...
Angular如何创建服务？5种方式了解一下！
本篇文章给大家介绍一下Angular创建服务的5种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。config配置块Angular应用的运行主要分为两部分...
浅谈Angular中导入本地JSON文件的方法
本篇文章给大家介绍一下如何在Angular中导入本地JSON文件。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1.第一种Angular从6.1+开始支持Ty...
浅谈angular中控制器、服务和指令的关系
本篇文章给大家介绍一下angular控制器、服务和指令三者之间的关系。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。【相关推荐：《angular教程》】从总体...
浅谈angular控制器通信的4种方式
本篇文章给大家介绍一下angular控制器通信的4种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。【相关推荐：《angular教程》】首先概括一下ang...
详解angular中为HTML元素添加css类的几种方式
本篇文章给大家介绍一下angular中为HTML元素添加css类的几种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。主要是探索为Angular中的HTM...
浅谈angular指令中的4种设计模式
本篇文章给大家介绍一下angular指令中的4种设计模式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。【相关推荐：《angular教程》】指令的功能集非常丰...
聊聊angular指令中的preLink和postLink函数
本篇文章给大家介绍一下angular指令中的preLink和postLink函数。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。【相关推荐：《angular教...

浏览更多有关 angular ngRoute路径的内容