angular中怎么解决ngRoute路径出现#!#的问题-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

angular中怎么解决ngRoute路径出现#!#的问题

这篇文章主要介绍了angular中怎么解决ngRoute路径出现#!#的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联是一家网站设计公司,集创意、互联网应用、软件技术为一体的创意网站建设服务商,主营产品:成都响应式网站建设公司品牌网站制作成都营销网站建设。我们专注企业品牌在网站中的整体树立,网络互动的体验,以及在手机等移动端的优质呈现。成都网站设计、成都网站建设、外贸网站建设、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏析悦目的作品,网站的价值服务。

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

About

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

打印一下$location。

angular中怎么解决ngRoute路径出现#!#的问题

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

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

相当于以下代码

$locationProvider.hashPrefix('!');

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

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

$locationProvider.hashPrefix('');

2、改变一下href的格式

About

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

html

About

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定义一个模块。

感谢你能够认真阅读完这篇文章,希望小编分享的“angular中怎么解决ngRoute路径出现#!#的问题”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


文章名称:angular中怎么解决ngRoute路径出现#!#的问题
当前网址:http://kswsj.cn/article/pdseee.html

其他资讯