問題描述

這是我的路由：

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.4tl426be.cn/wenda/14527.html#/phones/{{phone.id}}'>{{phone.name}}</a>

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

Not found同樣的事情還發生在vuejs里

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

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

即使你不學，請認真完整的閱讀官方文檔，官方例子寫得很明白！

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

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

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

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

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