Quelle est la différence entre le routage React et le routage Vue ?

Différences : 1. Le routage React est une méthode de composant globale et le routage vue est une méthode de configuration globale ; 2. Le routage React prend en charge la configuration du formulaire de composant dans la syntaxe objet et jsx, tandis que le routage vue ne prend en charge que la configuration du formulaire d'objet ; dans vue, le routage sera rendu vers "", contrairement au routage de réaction.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Quelle est la différence entre le routage React et le routage Vue ?

En général, les concepts de conception des deux sont à peu près les mêmes, mais comme les frameworks correspondants sont VUE et React, il existe de légères différences dans la façon dont ils sont utilisés. L’objectif ci-dessous est de comparer leurs différences.

Qu'il s'agisse de vue-router ou dereact-router, leur intention initiale la plus fondamentale est d'implémenter le routage frontal. En termes simples, ce qu'on appelle le routage frontal signifie que lorsque l'URL du navigateur change, il ne fait pas de requête au serveur, mais contrôle directement la page frontale pour qu'elle change, afin d'attendre que le front-end produire des sauts de page similaires lors du changement de fonction, par exemple.

La chose la plus élémentaire ici, qu'il s'agisse de vue-router ou dereact-router, doit fournir une méthode de configuration afin que les utilisateurs puissent **configurer la relation correspondante entre le chemin de l'url et le composant à afficher**. De cette manière, lorsque l'utilisateur déclenche une modification de l'URL du navigateur via des clics sur la page ou d'autres méthodes, le système VUE ou React peut trouver le composant VUE ou le composant React correspondant à l'URL, et ainsi restituer le composant sur la page de manière ciblée. manière.

##### 典型代码：
###### vue-router
JS:
```
const Foo = { template: &#39;<div>foo</div>&#39; }
const Bar = { template: &#39;<div>bar</div>&#39; }
const routes = [
  { path: &#39;/foo&#39;, component: Foo },
  { path: &#39;/bar&#39;, component: Bar }
]
const router = new VueRouter({undefined
  routes
})
const app = new Vue({undefined
  router
}).$mount(&#39;#app&#39;)
```
HTML:
```
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-linkto="/foo">Go to Foo</router-link>
    <router-linkto="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口-->
  <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
</div>
```
###### react-router
JS/JSX:
```
// modules/Foo.js
import React from &#39;react&#39;
export default React.createClass({undefined
  render() {undefined
    return<div>Foo</div>
  }
})
```
```
// modules/Bar.js
import React from &#39;react&#39;
export default React.createClass({undefined
  render() {undefined
    return<div>Bar</div>
  }
})
```
```
// index.js
// ...
render((
  <Routerhistory={hashHistory}>
    <Route path="/"component={App}>
      {/* make them children of `App`*/}
      <Route path="/foo"component={Foo}/>
      <Route path="/bar"component={Bar}/>
    </Route>
  </Router>
), document.getElementById(&#39;app&#39;))
```
```
// modules/App.js
// ...
  render() {undefined
    return (
      <div>
        <h1>React RouterTutorial</h1>
        <ulrole="nav">
          <li><Linkto="/foo">Go To Foo</Link></li>
          <li><Linkto="/bar">Go To Bar</Link></li>
        </ul>
        {/* 路由匹配到的组件将渲染在这里 */}
        {this.props.children}
      </div>
    )
  }
// ...
```

Les deux codes typiques sont en fait différents.

Il semble que la route racine et deux routes personnalisées soient implémentées, mais le code typique de React-Router utilisé ici utilise en fait le sous-routage, tandis que vue-router n'utilise que le routage de niveau parallèle. La raison pour laquelle ces deux codes typiques différents sont inclus est qu’il est en réalité plus facile de comparer les différences entre les deux.

- Définissez d’abord les composants. La différence dans la manière dont les composants Foo et Bar sont définis est une différence de niveau de syntaxe entre les frameworks VUE et React, et dépasse le cadre de notre discussion.

- Une fois le composant défini, configurez la relation correspondante entre l'url et le composant. Dans le code typique, vue-router définit un objet routes, qui est un tableau, et chaque objet du tableau représente la relation correspondante. La définition de React-Router utilise JSX, qui exprime clairement cette correspondance et la relation parent-enfant avec/routage. Il convient de noter que la configuration du routage de VUE doit être fournie au nouvel objet VueRouter(), qui doit être fourni lorsque l'objet VUE global est initialisé, tandis que le routage React doit être configuré pour le composant global réagir-router Fournit également une méthode de configuration similaire au tableau d'objets dans le code typique de vue-router, mais à la fin, la configuration doit toujours être transmise à . **L'un est la configuration globale (VUE) et l'autre est le composant global (React). C'est l'une des différences fondamentales dans l'utilisation des deux. **(vue-router ne fournit pas de configuration de type HTML comme JSX. Il ne peut fournir qu'une configuration de routage en mode objet, qui est également déterminée par différents systèmes-cadres)

- Configuration de sous-routage. vue-router ne reflète pas la façon de configurer les sous-routes dans le code typique. En fait, en ce qui concerne l'utilisation des composants de routage vue-router, quel que soit le niveau du composant de routage, ** sera rendu. le composant parent , et la route enfant sera utilisée comme composant enfant. L'objet enfant sera transmis au composant parent en tant que paramètre. , et le composant parent spécifiera la position de rendu**. C'est aussi la raison pour laquelle dans le code typique, vue-router n'écrit pas la relation parent-enfant du routage, alors que le code typique de React-Router reflète la relation de routage parent-enfant.

#### Résumé des différences d'utilisation :

• - vue-router est une méthode de configuration globale, et réagissez-router est une méthode de composant globale.

• - vue-router prend uniquement en charge la configuration sous forme d'objet, et React-Router prend en charge la configuration sous forme de composant sous forme d'objet et la syntaxe JSX.

• - Tout composant de routage de vue-router sera rendu à la position , le sous-composant React-Router est transmis au composant parent en tant qu'enfant et le composant racine est rendu à

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!