這篇文章主要介紹了angular中怎么解決ngRoute路徑出現(xiàn)#!#的問(wèn)題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營(yíng)產(chǎn)品：成都響應(yīng)式網(wǎng)站建設(shè)公司、品牌網(wǎng)站制作、成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)。我們專(zhuān)注企業(yè)品牌在網(wǎng)站中的整體樹(shù)立，網(wǎng)絡(luò)互動(dòng)的體驗(yàn)，以及在手機(jī)等移動(dòng)端的優(yōu)質(zhì)呈現(xiàn)。成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營(yíng)、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價(jià)值服務(wù)。

在做一個(gè)開(kāi)源項(xiàng)目的時(shí)候，使用了"angular-route": "^1.6.4"，發(fā)現(xiàn)設(shè)置了標(biāo)簽的href后，點(diǎn)擊后路徑出現(xiàn)的不是#/，而是#!#。然而我并沒(méi)有設(shè)置hashPrefix。

About

點(diǎn)擊標(biāo)簽后地址欄中出現(xiàn)：http://localhost:9000/#!#about。

打印一下$location。

發(fā)現(xiàn)我們?cè)O(shè)置的$location中，并沒(méi)有像預(yù)期的那樣是顯示在偽url的path部分，而是跑到hash部分。

原因是：在route版本>1.6.0的時(shí)候，默認(rèn)的hashPrefix被修改為了‘!’。

相當(dāng)于以下代碼

$locationProvider.hashPrefix('!');

下面提供有兩種解決方案：

1、把hashPrefix恢復(fù)為1.6以前的版本那樣。

$locationProvider.hashPrefix('');

2、改變一下href的格式

About

還有一點(diǎn)需要注意的是，一旦引進(jìn)了ngRoute，那么標(biāo)簽就好像被ngRoute重寫(xiě)默認(rèn)行為了一樣，一旦href以#開(kāi)頭，那么它會(huì)在url的hash部分添加一個(gè)/，而不是直接將字符串附加到#之后，所以類(lèi)似就不能夠跳轉(zhuǎn)到id="about"的標(biāo)簽了。我研究了一下，可以寫(xiě)一個(gè)指令，然后調(diào)用window.location.hash來(lái)解決這個(gè)問(wèn)題。

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定義一個(gè)模塊。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“angular中怎么解決ngRoute路徑出現(xiàn)#!#的問(wèn)題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!