反応ルーティングと vue ルーティングの違いは何ですか?-フロントエンドQ&A-php.cn

違い: 1. React ルーティングはグローバルコンポーネントメソッドであり、vue ルーティングはグローバル設定メソッドです。2. React ルーティングはオブジェクトおよび JSX 構文のコンポーネントフォーム設定をサポートしますが、vue ルーティングはオブジェクトフォーム設定のみをサポートします。3. . vue routing コンポーネントはすべて「」にレンダリングされますが、react routing はレンダリングされません。

反応ルーティングと vue ルーティングの違いは何ですか?

#このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。

react と vue routing の違いは何ですか

一般的に、両者の設計思想はほぼ同じですが、対応するフレームワークが VUE と React であるため、使用方法が若干異なります微妙な違いがいくつかあります。以下では、それらの違いを比較することに焦点を当てます。

vue-router であっても、react-router であっても、最も基本的な本来の目的は、フロントエンドルーティングを実装することです。いわゆるフロントエンドルーティングとは、簡単に言えば、ブラウザの URL が変更されたときに、サーバーにリクエストを行うのではなく、フロントエンドが変更することを期待するために、フロントエンドページの変更を直接制御することを意味します。たとえば、機能を切り替えるときに同様のページジャンプが発生します。

ここで最も基本的なことは、vue-router であっても、react-router であっても、ユーザーが **URL パスと表示されるコンポーネントの間の対応関係を設定できるように* * 設定メソッドを提供する必要があります。。このようにして、ユーザーがページのクリックやその他の方法でブラウザ URL の変更をトリガーすると、VUE または React システムは URL に対応する VUE コンポーネントまたは React コンポーネントを見つけて、ターゲットを絞ったページ上のコンポーネントをレンダリングできます。やり方。

##### 典型代码： ###### vue-router JS: ``` const Foo = { template: 'foo
' } const Bar = { template: 'bar
' } const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] const router = new VueRouter({undefined routes }) const app = new Vue({undefined router }).$mount('#app') ``` HTML: ```  Hello App!
  Go to Foo Go to Bar 
    
 ``` ###### react-router JS/JSX: ``` // modules/Foo.js import React from 'react' export default React.createClass({undefined render() {undefined returnFoo
 } }) ``` ``` // modules/Bar.js import React from 'react' export default React.createClass({undefined render() {undefined returnBar
 } }) ``` ``` // index.js // ... render((   {/* make them children of `App`*/}     ), document.getElementById('app')) ``` ``` // modules/App.js // ... render() {undefined return (  React RouterTutorial
  Go To Foo
 Go To Bar
  {/* 路由匹配到的组件将渲染在这里 */} {this.props.children} 
 ) } // ... ```

ログイン後にコピー

2 つの典型的なコードは実際には異なります。

ルートルートと 2 つのカスタムルートが実装されているようですが、ここで使用されている react-router の一般的なコードは実際にはサブルーティングを使用しており、vue-router はパラレルレベルのルーティングのみを使用しています。これら 2 つの異なる代表的なコードが含まれている理由は、実際には 2 つの違いを比較しやすいためです。

#- まずコンポーネントを定義します。 Foo コンポーネントと Bar コンポーネントの定義方法の違いは、VUE フレームワークと React フレームワークの間の構文レベルの違いであり、ここでは説明の範囲を超えています。

#- コンポーネントを定義した後、URL とコンポーネント間の対応関係を構成します。一般的なコードでは、vue-router は配列であるルートオブジェクトを定義し、配列内の各オブジェクトは対応する関係を表します。 React-routerの定義ではJSXを使用しており、この対応やルーティングとの親子関係を明確に表現しています。 VUE のルーティング設定は新しい VueRouter() オブジェクトに提供する必要があり、グローバル VUE オブジェクトの初期化時に提供する必要がある一方、React ルーティングはグローバルコンポーネントに設定する必要があることに注意してください。また、react-router は、vue-router の一般的なコードのオブジェクト配列と同様の構成メソッドを提供しますが、最終的には構成をに渡す必要があります。 **1 つはグローバル構成 (VUE)、もう 1 つはグローバルコンポーネント (React) であり、これが 2 つの使用における基本的な違いの 1 つです。 **(vue-router は JSX のような HTML のような構成を提供しません。オブジェクトモードでのみルーティング構成を提供できます。これも異なるフレームワークシステムによって決定されます)

- サブルーティング構成。 vue-router は、一般的なコードでのサブルートの設定方法を反映していません。実際、vue-router ルーティングコンポーネントの使用に関する限り、ルーティングコンポーネントのどのレベルであっても、** はレンダリングされます。親コンポーネント ;コンポーネントが識別される場所**。 React-router の場合、**root ルートはで指定された場所にレンダリングされ、子ルートは子コンポーネントとして使用され、子オブジェクトはパラメータとして親コンポーネントに渡されます。、親コンポーネントはオブジェクトを指定します。レンダリング位置**。これは、react-router の一般的なコードがルーティングの親子関係を反映しているのに対し、vue-router がルーティングの親子関係を記述していない理由でもあります。

# 使用上の違いの概要:

#- vue-router はオブジェクト形式での構成のみをサポートし、react-router はオブジェクト形式と JSX 構文でのコンポーネント形式の構成をサポートします。
#- vue-router のルーティングコンポーネントはすべての位置にレンダリングされます。react-router サブコンポーネントは子として親コンポーネントに渡されます。、ルートコンポーネントはの場所にレンダリングします。
推奨学習: 「
react ビデオチュートリアル

以上が反応ルーティングと vue ルーティングの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。