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

L'application Web doit identifier différents états via des URL. Différents états correspondent à différentes URL, ce qui est pratique pour avancer et reculer et pour enregistrer des signets.
Cependant, afin de garantir l'expérience utilisateur dans Web App, les transitions de statut de page n'actualisent généralement pas la page, ce qui est souvent réalisé via ajax.
L'ajax traditionnel n'affectera pas la barre d'adresse (la requête est complétée via l'objet XHR, plutôt que de demander une nouvelle URL), alors que se passe-t-il si vous souhaitez que l'URL corresponde à différents états de page ? Des méthodes telles que windows.location actualiseront la page entière.
Cela nécessite d'utiliser le # traditionnel. Les points d'ancrage vous permettaient à l'origine de vous déplacer entre différentes parties de la page actuelle, en prenant en charge l'avant et l'arrière et en enregistrant les signets, ils étaient donc utilisés dans le routage des applications Web. De cette façon, www.example.com/index.html#phones et www.example.com/index.html#users peuvent représenter deux états, et la transition n'actualisera pas la page.
La nouvelle API History peut supprimer #, mais le serveur doit fournir une version de secours, je n'entrerai donc pas dans les détails ici.

Answer 2

1. Apprenez d'abord les connaissances de base du routage front-end, les éléments les plus élémentaires tels que onHashChange et pushState, et écrivez même vous-même une route à petite échelle avant de l'utiliser !

2. Même si vous n'apprenez pas, veuillez lire attentivement et complètement la documentation officielle, les exemples officiels sont très clairs !

Answer 3

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

Vue configure le mode de routage en mode html5. C'est mentionné dans le document officiel mais il ne dit pas comment l'écrire

.

Answer 4

Il est recommandé d'utiliser v-link="{path : '/phones'}" en HTML afin de ne pas avoir à vous soucier du hachage

Answer 5

C'est ainsi que le front-end implémente le routage. #Le back-end est également appelé hachage, qui est en fait similaire à un point d'ancrage. Ce à quoi vous pensez est le chemin, qui nécessite la coopération du back-end. et ainsi de suite, c'est pour une meilleure expérience. Vous pouvez aller et venir.

Answer 6

Téléchargez le lien d'ancrage sur Baidu, puis lisez la documentation d'angularjs et vuejs, frère