問題描述

這是我的路由：

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://www.intensediesel.com/wenda/14527.html#/phones/{{phone.id}}'>{{phone.name}}</a>

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

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

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

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://www.intensediesel.com/wenda/14527.html#/phones/{{phone.id}}'>{{phone.name}}</a>

同樣的，帶著#號(hào)路由正常工作，去掉就：

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

為什么會(huì)這樣？這個(gè)#號(hào)到底有什么作用？為什么http://localhost:8000/phones/motorola-xoom就不能識(shí)別，http://localhost:8000/app/index.html#/phones/motorola-xoom就能識(shí)別出來？

問題解答

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

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

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

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

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

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

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

百度下錨點(diǎn)鏈接，然后看下angularjs和vuejs的文檔，兄弟