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

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

#このチュートリアルの動作環境: 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: &#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>
    )
  }
// ...
```

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

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

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

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

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

# 使用上の違いの概要:

- vue-router はグローバル構成メソッドであり、react-router はグローバル構成メソッドですコンポーネントウェイ。

• #- vue-router はオブジェクト形式での構成のみをサポートし、react-router はオブジェクト形式と JSX 構文でのコンポーネント形式の構成をサポートします。

• #- vue-router のルーティング コンポーネントはすべて 99ae171a883fff6fa2f384572360bc0a の位置にレンダリングされます。react-router サブコンポーネントは子として親コンポーネントに渡されます。 、ルート コンポーネントは 9532c289a9b317d4ae0f0806103be5ce の場所にレンダリングします。

• 推奨学習: 「

  react ビデオ チュートリアル
」

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