扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍“react和vue的路由有哪些区别”,在日常操作中,相信很多人在react和vue的路由有哪些区别问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”react和vue的路由有哪些区别”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
成都创新互联网站建设公司一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!专注中小微企业官网定制,成都网站设计、成都网站建设,塑造企业网络形象打造互联网企业效应。
区别:1、react路由是全局组件方式,vue路由是全局配置方式;2、react路由支持对象和jsx语法的组件形式配置,vue路由只支持对象形式配置;3、vue路由任何组件都会被渲染到“
”,而react路由不是。
本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。
总的来说,二者的设计理念大致相同,但是由于对应的框架分别是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: `````` ###### react-router JS/JSX: ``` // modules/Foo.js import React from 'react' export default React.createClass({undefined render() {undefined returnHello App!
Go to Foo Go to Bar Foo} }) ``` ``` // modules/Bar.js import React from 'react' export default React.createClass({undefined render() {undefined returnBar} }) ``` ``` // index.js // ... render(({/* make them children of `App`*/} ), document.getElementById('app')) ``` ``` // modules/App.js // ... render() {undefined return ( ) } // ... ```React RouterTutorial
Go To Foo {/* 路由匹配到的组件将渲染在这里 */} {this.props.children} Go To Bar
两个典型代码实际上是有区别的。
看似都实现了根路由和两个自定义路由,但是这里用的react-router的典型代码实际上采用了子路由的方式,而vue-router仅用了并列级别的路由。之所以放这两种不同的典型代码,实际上这样更容易对比出二者的区别。
- 首先定义组件。定义Foo组件和Bar组件的方式的区别是VUE和React框架语法级别的区别,不在我们的讨论范围之内。
- 组件定义好之后,配置url和组件的对应关系。在典型代码中,vue-router定义了一个routes对象,它是一个数组,数组中每个对象表示该对应关系。而react-router定义采用了JSX方式,清晰地表示了这个对应关系,以及和/路由的父子关系。需要注意的是:VUE的路由配置要提供给new VueRouter()对象,这个对象要在全局VUE对象初始化时提供;而React路由则需要配置给全局
- 子路由配置。vue-router在典型代码中并没有体现如何配置子路由,其实就vue-router路由组件的使用来说,无论是哪个级别的路由组件,**都会被渲染到父组件
#### 使用时的不同点总结:
- vue-router是全局配置方式,react-router是全局组件方式。
- vue-router仅支持对象形式的配置,react-router支持对象形式和JSX语法的组件形式配置。
- vue-router任何路由组件都会被渲染到
到此,关于“react和vue的路由有哪些区别”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流