189 8069 5689

react和vue的路由有哪些区别

这篇文章主要介绍“react和vue的路由有哪些区别”，在日常操作中，相信很多人在react和vue的路由有哪些区别问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react和vue的路由有哪些区别”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联网站建设公司一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！专注中小微企业官网定制，成都网站设计、成都网站建设，塑造企业网络形象打造互联网企业效应。

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

本教程操作环境：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: '
foo
' }
const Bar = { template: '
bar
' }
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
const router = new VueRouter({undefined
  routes
})
const app = new Vue({undefined
  router
}).$mount('#app')
```
HTML:
```

  
Hello App!

  

    Go to Foo
    Go to Bar
  

  
  
 
``` ###### react-router JS/JSX: ``` // modules/Foo.js import React from 'react' export default React.createClass({undefined   render() {undefined     return
Foo
  } }) ``` ``` // modules/Bar.js import React from 'react' export default React.createClass({undefined   render() {undefined     return
Bar
  } }) ``` ``` // index.js // ... render((               {/* make them children of `App`*/}                       ), document.getElementById('app')) ``` ``` // modules/App.js // ...   render() {undefined     return (       
        

React RouterTutorial

                   
  • Go To Foo
    •           
  • Go To Bar
    •                  {/* 路由匹配到的组件将渲染在这里 */}         {this.props.children}       
        )   } // ... ```

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

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

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

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

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

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

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

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

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

    到此，关于“react和vue的路由有哪些区别”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


    网站栏目：react和vue的路由有哪些区别
    文章分享：http://cdxtjz.cn/article/jdppds.html

    其他资讯