Apakah perbezaan antara penghalaan tindak balas dan vue?

Perbezaan: 1. Penghalaan tindak balas ialah kaedah komponen global, dan penghalaan vue ialah kaedah konfigurasi global; 2. Penghalaan tindak balas menyokong konfigurasi bentuk komponen dalam sintaks objek dan jsx, manakala penghalaan vue hanya menyokong konfigurasi bentuk objek; 3. vue routing Mana-mana komponen akan diberikan kepada "99ae171a883fff6fa2f384572360bc0a", tetapi react routing tidak.

Persekitaran pengendalian tutorial ini: sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah perbezaan antara penghalaan tindak balas dan vue

Secara umum, konsep reka bentuk kedua-duanya adalah lebih kurang sama, tetapi memandangkan rangka kerja yang sepadan masing-masing adalah VUE dan React, kaedah penggunaannya adalah sedikit berbeza. Terdapat beberapa perbezaan yang ketara. Fokus di bawah adalah untuk membandingkan perbezaan mereka.

Sama ada ia vue-router atau react-router, niat asal mereka yang paling asas ialah untuk melaksanakan penghalaan bahagian hadapan. Apa yang dipanggil penghalaan bahagian hadapan, secara ringkasnya, bermakna apabila URL penyemak imbas berubah, ia tidak membuat permintaan kepada pelayan, tetapi secara langsung mengawal halaman hujung hadapan untuk berubah, untuk mengharapkan bahagian hadapan untuk menghasilkan lompatan halaman yang serupa apabila menukar fungsi, contohnya.

Perkara paling asas di sini, sama ada vue-router atau react-router, mesti menyediakan kaedah konfigurasi supaya pengguna boleh **mengkonfigurasi hubungan yang sepadan antara laluan url dan komponen yang akan dipaparkan* * . Dengan cara ini, apabila pengguna mencetuskan perubahan dalam URL penyemak imbas melalui klik halaman atau kaedah lain, sistem VUE atau React boleh mencari komponen VUE atau komponen React yang sepadan dengan URL, dan dengan itu menjadikan komponen pada halaman dalam sasaran cara.

##### 典型代码：
###### 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>
    )
  }
// ...
```

Dua kod biasa sebenarnya berbeza.

Nampaknya kedua-duanya melaksanakan laluan akar dan dua laluan tersuai, tetapi kod tipikal penghala tindak balas yang digunakan di sini sebenarnya menggunakan penghalaan kecil, manakala penghala vue hanya menggunakan penghalaan peringkat selari. Sebab mengapa kedua-dua kod tipikal yang berbeza ini disertakan ialah ia sebenarnya lebih mudah untuk membandingkan perbezaan antara kedua-duanya.

- Mula-mula tentukan komponen. Perbezaan dalam cara komponen Foo dan komponen Bar ditakrifkan ialah perbezaan tahap sintaks antara rangka kerja VUE dan React, dan berada di luar skop perbincangan kami.

- Selepas komponen ditakrifkan, konfigurasikan hubungan yang sepadan antara url dan komponen. Dalam kod biasa, vue-router mentakrifkan objek laluan, iaitu tatasusunan, dan setiap objek dalam tatasusunan mewakili hubungan yang sepadan. Takrifan penghala tindak balas menggunakan JSX, yang menyatakan dengan jelas surat-menyurat ini dan hubungan ibu bapa-anak dengan/penghalaan. Perlu diingatkan bahawa konfigurasi penghalaan VUE mesti disediakan kepada objek VueRouter() baharu, yang mesti disediakan apabila objek VUE global dimulakan manakala penghalaan React perlu dikonfigurasikan kepada komponen 9532c289a9b317d4ae0f0806103be5ce react-router juga Menyediakan kaedah konfigurasi yang serupa dengan tatasusunan objek dalam kod tipikal vue-router, tetapi pada akhirnya konfigurasi masih perlu dihantar ke 9532c289a9b317d4ae0f0806103be5ce. **Satu ialah konfigurasi global (VUE) dan satu lagi ialah komponen global (React Ini adalah salah satu perbezaan asas dalam penggunaan kedua-duanya). **(vue-router tidak menyediakan konfigurasi seperti HTML seperti JSX. Ia hanya boleh menyediakan konfigurasi penghalaan dalam mod objek, yang juga ditentukan oleh sistem rangka kerja yang berbeza)

- Konfigurasi sub-rute. vue-router tidak menggambarkan cara mengkonfigurasi sub-laluan dalam kod biasa Malah, setakat penggunaan komponen penghalaan vue-router, tidak kira tahap komponen penghalaan itu, ** akan diberikan kepada. komponen induk 7046da910de9839b8d7b93f1efd1fabb dan laluan anak akan digunakan sebagai komponen anak akan dihantar ke komponen induk sebagai parameter , dan komponen induk akan menentukan kedudukan Render**. Ini juga merupakan sebab mengapa dalam kod biasa, vue-router tidak menulis perhubungan induk-anak penghalaan, manakala kod tipikal penghala tindak balas mencerminkan hubungan penghalaan ibu bapa-anak.

#### Ringkasan perbezaan penggunaan:

• - vue-router ialah kaedah konfigurasi global, react-router ialah global Cara komponen.

• - vue-router hanya menyokong konfigurasi dalam bentuk objek, dan react-router menyokong konfigurasi bentuk komponen dalam bentuk objek dan sintaks JSX.

• - Mana-mana komponen penghalaan vue-router akan diberikan kepada kedudukan 99ae171a883fff6fa2f384572360bc0a, sub-komponen penghala tindak balas dihantar ke komponen induk sebagai anak , dan komponen akar ialah Render ke lokasi 9532c289a9b317d4ae0f0806103be5ce

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah perbezaan antara penghalaan tindak balas dan vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!