angulaire.js - Seules les routes avec #, angulairejs et vuejs peuvent identifier les chemins ?

Question

En Angulaire

Voici mon itinéraire :

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'
      });
  }]);

Voici mon htmlcode :

<a href="#/phones/{{phone.id}}">{{phone.name}}</a>

L'attribut

href commence par un numéro # Lorsque ce numéro # est inclus, le routage fonctionnera normalement. Si vous supprimez le numéro #, l'itinéraire ne trouvera pas le chemin :

Not found

La même chose se produit dans vuejs

Quand j'utilise vuejs et vue-router, voici mon itinéraire :

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");

C'est html :

<a href="#/phones/{{phone.id}}">{{phone.name}}</a>

De même, le routage avec le numéro # fonctionne normalement. Supprimez-le :

.

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

Pourquoi cela se produit-il ? A quoi sert exactement ce # numéro ?
Pourquoi http://localhost:8000/phones/motorola-xoom ne peut-il pas être reconnu mais http://localhost:8000/app/index.html#/phones/motorola-xoom peut être reconnu ?

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