Heim  >  Artikel  >  Web-Frontend  >  Was ist der Unterschied zwischen React- und Vue-Routing?

Was ist der Unterschied zwischen React- und Vue-Routing?

WBOY
WBOYOriginal
2022-04-21 16:26:312882Durchsuche

区别:1、react路由是全局组件方式,vue路由是全局配置方式;2、react路由支持对象和jsx语法的组件形式配置,vue路由只支持对象形式配置;3、vue路由任何组件都会被渲染到“99ae171a883fff6fa2f384572360bc0a”,而react路由不是。

Was ist der Unterschied zwischen React- und Vue-Routing?

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react和vue的路由有什么区别

总的来说,二者的设计理念大致相同,但是由于对应的框架分别是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>
    )
  }
// ...
```

两个典型代码实际上是有区别的。

看似都实现了根路由和两个自定义路由,但是这里用的react-router的典型代码实际上采用了子路由的方式,而vue-router仅用了并列级别的路由。之所以放这两种不同的典型代码,实际上这样更容易对比出二者的区别。

- 首先定义组件。定义Foo组件和Bar组件的方式的区别是VUE和React框架语法级别的区别,不在我们的讨论范围之内。

- 组件定义好之后,配置url和组件的对应关系。在典型代码中,vue-router定义了一个routes对象,它是一个数组,数组中每个对象表示该对应关系。而react-router定义采用了JSX方式,清晰地表示了这个对应关系,以及和/路由的父子关系。需要注意的是:VUE的路由配置要提供给new VueRouter()对象,这个对象要在全局VUE对象初始化时提供;而React路由则需要配置给全局9532c289a9b317d4ae0f0806103be5ce组件,虽然react-router也提供类似于vue-router典型代码中的对象数组形式的配置方式,但是最终仍是要将配置传递给9532c289a9b317d4ae0f0806103be5ce。**一个是全局配置(VUE),一个是全局组件(React),这是两者使用上的根本区别之一。**(vue-router并不提供像JSX这种类html的配置方式,它只能以对象方式提供路由配置,这也是框架系统不同所决定的)

- 子路由配置。vue-router在典型代码中并没有体现如何配置子路由,其实就vue-router路由组件的使用来说,无论是哪个级别的路由组件,**都会被渲染到父组件99ae171a883fff6fa2f384572360bc0a组件标识的地方**。对于react-router,**根路由会被渲染到9532c289a9b317d4ae0f0806103be5ce指定的位置,而子路由则会作为子组件,将children对象以参数方式传入父组件,由父组件将该对象指定渲染位置**。这也是为什么在典型代码中vue-router没有写路由的父子关系而react-router的典型代码体现了父子路由关系的原因。

#### 使用时的不同点总结:

  • - vue-router是全局配置方式,react-router是全局组件方式。

  • - vue-router仅支持对象形式的配置,react-router支持对象形式和JSX语法的组件形式配置。

  • - vue-router任何路由组件都会被渲染到99ae171a883fff6fa2f384572360bc0a位置,react-router子组件作为children被传入父组件,而根组件被渲染到9532c289a9b317d4ae0f0806103be5ce位置。

推荐学习:《react视频教程

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen React- und Vue-Routing?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn