반응 라우팅과 Vue 라우팅의 차이점은 무엇입니까?

차이점: 1. React 라우팅은 전역 구성 요소 방식이고, vue 라우팅은 전역 구성 방식입니다. 2. React 라우팅은 객체 및 jsx 구문에서 구성 요소 형식 구성을 지원하는 반면, vue 라우팅은 객체 형식 구성만 지원합니다. vue 라우팅에서는 "99ae171a883fff6fa2f384572360bc0a"로 렌더링되지만 반응 라우팅에서는 렌더링되지 않습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

react와 Vue Routing의 차이점은 무엇인가요?

일반적으로 둘의 디자인 컨셉은 거의 같지만, 해당 프레임워크가 VUE와 React이기 때문에 사용법에 약간의 차이가 있습니다. 아래의 초점은 차이점을 비교하는 것입니다.

vue-router이든 React-router이든 가장 기본적인 원래 의도는 프런트엔드 라우팅을 구현하는 것입니다. 간단히 말해서 소위 프런트엔드 라우팅이란 브라우저 URL이 변경되면 서버에 요청을 하지 않고 프런트엔드 페이지가 변경되도록 직접 제어하여 프런트엔드에서 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>
    )
  }
// ...
```

두 가지 일반적인 코드는 실제로 다릅니다.

루트 경로와 두 개의 사용자 지정 경로가 구현된 것으로 보이지만 여기에 사용된 일반적인 React-router 코드는 실제로 하위 라우팅을 사용하는 반면, vue-router는 병렬 수준 라우팅만 사용합니다. 이렇게 서로 다른 두 가지 대표 코드를 포함시키는 이유는 실제로 둘 사이의 차이점을 비교하는 것이 더 쉽기 때문입니다.

- 먼저 구성요소를 정의합니다. Foo 구성 요소와 Bar 구성 요소가 정의되는 방식의 차이점은 VUE와 React 프레임워크 간의 구문 수준 차이이며 논의 범위를 벗어납니다.

- 구성 요소가 정의된 후 URL과 구성 요소 간의 해당 관계를 구성합니다. 일반적인 코드에서 vue-router는 배열인 경로 객체를 정의하고 배열의 각 객체는 해당 관계를 나타냅니다. 반응 라우터 정의는 JSX를 사용하며, 이는 이러한 대응 및 라우팅과의 상위-하위 관계를 명확하게 표현합니다. VUE의 라우팅 구성은 전역 VUE 객체가 초기화될 때 제공되어야 하는 새로운 VueRouter() 객체에 제공되어야 하며, React 라우팅은 전역 9532c289a9b317d4ae0f0806103be5ce 반응 라우터는 또한 일반적인 vue-router 코드의 객체 배열과 유사한 구성 방법을 제공하지만 결국 구성은 여전히 ​​9532c289a9b317d4ae0f0806103be5ce에 전달되어야 합니다. **하나는 전역 구성(VUE)이고 다른 하나는 전역 구성 요소(React)입니다. 이는 둘을 사용하는 근본적인 차이점 중 하나입니다. **(vue-router는 JSX와 같은 HTML과 같은 구성을 제공하지 않습니다. 객체 모드에서만 라우팅 구성을 제공할 수 있으며 이는 다른 프레임워크 시스템에 의해 결정됩니다.)

- 하위 라우팅 구성. vue-router는 일반적인 코드에서 하위 경로를 구성하는 방법을 반영하지 않습니다. 실제로 vue-router 라우팅 구성 요소의 사용에 관한 한 라우팅 구성 요소의 수준에 관계없이 ** 렌더링됩니다. 상위 구성요소 99ae171a883fff6fa2f384572360bc0a구성요소가 식별되는 곳**. React-Router의 경우 **루트 경로는 9532c289a9b317d4ae0f0806103be5ce에 지정된 위치에 렌더링되고 하위 경로는 하위 구성 요소로 사용되며 하위 객체는 매개 변수로 상위 구성 요소에 전달됩니다. , 상위 구성 요소는 개체 렌더링 위치**를 지정합니다. 이는 일반적인 코드에서 vue-router가 라우팅의 부모-자식 관계를 작성하지 않는 반면, React-router의 일반적인 코드는 부모-자식 라우팅 관계를 반영하는 이유이기도 합니다.

#### 사용상의 차이점 요약:

• - vue-router는 전역 구성 방식이고, React-router는 전역 구성 요소 방식입니다.

• - vue-router는 객체 형태의 구성만 지원하고, React-router는 객체 형태와 JSX 구문의 컴포넌트 형태 구성을 지원합니다.

• - vue-router의 모든 라우팅 구성 요소는 99ae171a883fff6fa2f384572360bc0a 위치로 렌더링되고, React-router 하위 구성 요소는 상위 구성 요소에 하위 구성 요소로 전달되고, 루트 구성 요소는 f52782113384a6ab828d7f3e178bf967

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응 라우팅과 Vue 라우팅의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!