vue和react路由的区别是什么?

本篇文章从设计理念、使用角度对vue和react路由进行了对比,不涉及实现原理。感兴趣的伙伴一起来看看吧!


vue和react路由的区别是什么?

二者的设计理念大致相同,但是由于对应的框架分别是VUE和React,使得它们的使用方式略有些细微的差别。下文的着重点就是对比它们的差别部分。

无论是vue-router还是react-router,它们的最基本的初衷就是实现前端路由。所谓前端路由,简单来说,就是当浏览器的url产生变化时,不向服务器进行请求,而是直接控制前端页面产生变化,以期待前端在比如功能切换时,产生类似页面跳转等效果。

而这里面最基本的,无论是vue-router还是react-router,都要提供一种配置方式,让使用者可以配置出url路径和要展示的组件的对应关系。这样一来,用户通过页面点击或者其他方式触发浏览器url变化时,VUE或者React系统就可以找到这个url对应的VUE组件或者React组件,从而有针对性地,将这个组件在页面上渲染。

典型代码:

vue-router

JS:

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
const router = new VueRouter({
  routes 
})
const app = new Vue({
  router
}).$mount('#app')

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 'react'
export default React.createClass({
  render() {
    return<div>Foo</div>
  }
})
```
```
// modules/Bar.js
import React from 'react'
export default React.createClass({
  render() {
    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('app'))
```
```
// modules/App.js
// ...
  render() {
    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路由则需要配置给全局<Router/>组件,虽然react-router也提供类似于vue-router典型代码中的对象数组形式的配置方式,但是最终仍是要将配置传递给<Router/>。一个是全局配置(VUE),一个是全局组件(React),这是两者使用上的根本区别之一。(vue-router并不提供像JSX这种类html的配置方式,它只能以对象方式提供路由配置,这也是框架系统不同所决定的)

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

使用时的不同点总结:

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

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

  • vue-router任何路由组件都会被渲染到<router-view/>位置,react-router子组件作为children被传入父组件,而根组件被渲染到<Router/>位置。

本文来自React答疑栏目,欢迎学习!

以上就是vue和react路由的区别是什么?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读