angular.js - 只有用#，angularjs和vuejs的路由才能辨識路徑？

Question

在Angular中

這是我的路線：

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="#/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="#/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就能辨識出來？

Answer 1

Web App 中需要透過URL 標識不同狀態，不同狀態對應不同URL 既方便前進後退，也方便保存書籤。
不過Web App 中為保證使用者體驗，頁面狀態的轉換一般是不刷新頁面的，這往往透過ajax實現。
傳統的ajax不會影響網址列（請求透過XHR物件完成，而不是請求新URL），那如果你想讓URL對應不同的頁面狀態怎麼辦？ windows.location之類的方法是會刷新整個頁面的。 windows.location之类的方法是会刷新整个页面的。
这就需要用到传统的#了。锚点这东西本来是让你在当前页面的不同部分移动的，支持前进后退和保存书签，于是就被拿来应用在Web App的路由中。这样www.example.com/index.html#phones 和www.example.com/index.html#users 就能表示两个状态，而且转换不会刷新页面。
新的History API可以把#這就需要用到傳統的#了。錨點這東西本來是讓你在目前頁面的不同部分移動的，支援前進後退和保存書籤，於是就被拿來應用在Web App的路由中。這樣www.example.com/index.html#phones 和www.example.com/index.html#users 就能表示兩個狀態，而且轉換不會刷新頁面。

新的History API可以把#去掉，不過需要伺服器提供一份fallback版本，這裡就不細說了。 🎜

Answer 2

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

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

Answer 3

var router = new VueRouter({
    history: true, //html5模式 去掉锚点
    saveScrollPosition: true //记住页面的滚动位置 html5模式适用
})

vue設定路由模式為html5模式 ，官方文件裡有提到 但是沒說怎麼寫

Answer 4

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

Answer 5

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

Answer 6

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