這篇文章主要介紹了angular中怎么解決ngRoute路徑出現(xià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ù)商，主營產(chǎn)品：成都響應(yīng)式網(wǎng)站建設(shè)公司、品牌網(wǎng)站制作、成都營銷網(wǎng)站建設(shè)。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(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)營、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價(jià)值服務(wù)。

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

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

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

打印一下$location。

發(fā)現(xiàn)我們設(shè)置的$location中，并沒有像預(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的格式

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

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

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

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

網(wǎng)頁題目：angular中怎么解決ngRoute路徑出現(xiàn)#!#的問題
標(biāo)題URL：http://vcdvsql.cn/article44/pdseee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、微信小程序、全網(wǎng)營銷推廣、域名注冊、網(wǎng)站導(dǎo)航、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)