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

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

WBOY

リリース： 2022-04-21 16:26:31

オリジナル

2929 人が閲覧しました

違い: 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: &#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 ルーティングはグローバルコンポーネントに設定する必要があることに注意してください。また、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 サイトの他の関連記事を参照してください。