vue.js - 只有用#，angularjs和vuejs的路由才能识别路径？

问题描述

问 题

在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就能识别出来？

解决方案

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版本，这里就不细说了。

这篇关于vue.js - 只有用#，angularjs和vuejs的路由才能识别路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！