問題描述

這是我的路由：

phonecatApp.config([’$routeProvider’, function($routeProvider) { $routeProvider. when(’/phones’, {templateUrl: ’partials/phone-list.html’,controller: ’PhoneListCtrl’ }). when(’/phones/:phoneId’, {templateUrl: ’partials/phone-detail.html’,controller: ’PhoneDetailCtrl’ }). otherwise({redirectTo: ’/phones’ }); }]);

這是我的html代碼：

<a href='http://m.propowerdrill.cn/wenda/14527.html#/phones/{{phone.id}}'>{{phone.name}}</a>

href屬性的開頭是個#號，當(dāng)帶著這個#號的時候，路由是正常工作的。如果去掉#號，路由就找不到路徑了：

Not found同樣的事情還發(fā)生在vuejs里

當(dāng)我使用vuejs和vue-router的時候，這是我的路由：

var router = new VueRouter();router.map({ '/': {component: phoneList }, '/phones': {component: phoneList }, '/phones/:phoneId': {component: { template: ’TBD: detail view for <span>{{$route.params.phoneId}}</span>’,} }});router.start(app, '#app');

這是html：

<a href='http://m.propowerdrill.cn/wenda/14527.html#/phones/{{phone.id}}'>{{phone.name}}</a>

同樣的，帶著#號路由正常工作，去掉就：

Cannot GET /phones/motorola-xoom-with-wi-fi

為什么會這樣？這個#號到底有什么作用？為什么http://localhost:8000/phones/motorola-xoom就不能識別，http://localhost:8000/app/index.html#/phones/motorola-xoom就能識別出來？

問題解答

Web App 中需要通過URL 標(biāo)識不同狀態(tài)，不同狀態(tài)對應(yīng)不同URL 既方便前進(jìn)后退，也方便保存書簽。不過Web App 中為保證用戶體驗，頁面狀態(tài)的轉(zhuǎn)換一般是不刷新頁面的，這往往通過ajax實現(xiàn)。傳統(tǒng)的ajax不會影響地址欄（請求通過XHR對象完成，而不是請求新URL），那如果你想讓URL對應(yīng)不同的頁面狀態(tài)怎么辦？windows.location之類的方法是會刷新整個頁面的。這就需要用到傳統(tǒng)的#了。錨點這東西本來是讓你在當(dāng)前頁面的不同部分移動的，支持前進(jìn)后退和保存書簽，于是就被拿來應(yīng)用在Web App的路由中。這樣www.example.com/index.html#phones 和www.example.com/index.html#users 就能表示兩個狀態(tài)，而且轉(zhuǎn)換不會刷新頁面。新的History API可以把#去掉，不過需要服務(wù)器提供一份fallback版本，這里就不細(xì)說了。

先學(xué)習(xí)一下前端路由的基本知識，onHashChange, pushState 這些最基本的東西，甚至自己寫一個小規(guī)模的路由，再去用！

即使你不學(xué)，請認(rèn)真完整的閱讀官方文檔，官方例子寫得很明白！

var router = new VueRouter({ history: true, //html5模式 去掉錨點 saveScrollPosition: true //記住頁面的滾動位置 html5模式適用})

vue配置路由模式為html5模式 ，官方文檔里有提到 但是沒說怎么寫

建議在 html 里 使用 v-link=“{path : ’/phones’}” 這樣 你就不用管 hash 了

這是前端實現(xiàn)路由的方式，#后面也就是所謂的hash，其實類似錨點，你所想的那種是path，是需要后端配合的，至于pushstate之類就是為了體驗更好，可以后退前進(jìn)。

百度下錨點鏈接，然后看下angularjs和vuejs的文檔，兄弟