本篇文章从设计理念, 使用角度对 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 答疑 https://www.html.cn/qa/react/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/react/16002.html