VueRouter和ReactRouter路由对比

原创已于 2022-05-26 16:17:59 修改 · 2.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Router

于 2022-05-08 18:26:00 首次发布

本文详细对比了Vue Router和React Router在引入方式、基础组件、路由模式、子路由配置以及参数传递和路由守卫等方面的差异。Vue Router通过Vue.use()安装，常用组件有router-link和router-view，而React Router直接配置在index.js中，常用组件包括Route、Switch和CacheRoute。路由模式上，两者都有hash和history模式，React Router还有额外的BrowserRouter等。在子路由和参数传递上，两者有相似但不同的实现方式。路由守卫方面，Vue Router有全局和组件级别的守卫，React Router则通过不同的API实现类似功能。

本质区别

vue-router是全局配置方式，react-router是全局组件方式。
vue-router仅支持对象形式的配置，react-router支持对象形式和JSX语法的组件形式配置。
vue-router任何路由组件都会被渲染到<router-view/>位置，react-router子组件作为children被传入父组件，而根组件被渲染到<Router/>位置。

一、引入方式不一样

vue必须要通过 Vue.use() 明确地安装路由功能；也可以将Vue.use()和vue-router的引入都放在独立模块中，（比如：router/index.js中，再在main.js中引入router/index.js）

react只需要在index.js中直接进行部分配置即可使用

二、用到的基础组件

vue-router常用组件：keep-alive、router-view

// 定义点击后导航到哪个路径下；对应的组件内容渲染到router-view中

 <router-link :to="{name:'home', params: {id:1}}"> 
 <router-link :to="{path:'/home', query: {id:1}}"> 
 <router-view a=1><router-view/>

// 被keep-alive包裹住的组件，会被vue进行缓存。当组件在keep-alive内被切换时组件的
// activated、deactivated这两个生命周期钩子函数会被执行

react-router常用组件：<switch />、<Route />、<CacheRoute />

// switch组件用来将react的包容性路由转换为排他性路由，每次只要匹配成功就不会继续向下匹配。
// Route组件定义了URL路径与组件的对应关系。

// CacheRoute组件的作用与Route大致相同，使用 CacheRoute 的组件将会得到一个名
//为 cacheLifecycles 的属性，里面包含两个额外生命周期的注入函数 didCache 和 didRecover，
// 分别用在组件 被缓存 和 被恢复 时触发。类比于vue-router中keep-alive实现的效果。

// <Route>组件有三个支持组件渲染属性 render、children、component

	<Route path="path" render={() => <div>这是内联组件写法</div>} />
	//嵌套组合方式
	<Route path="path" render={ props => (
		<ParentComp>
			<Comp {...props} />
		</ParentComp>
	) />

// 当Route有children属性时，不管当前的路径是否与Route匹配，该函数都会执行，
// 同时，children属性也会接受所有由route传入的所有参数

<Route path="path" children={ props => (
		<div className={props.match? "active": ''}>
			<Link to="path" />
		</div>
	) 
/>


<Route path="path" component={Comp} />

三、路由模式

vue-router主要有hash和history俩种模式：默认hash模式

// hash模式后边有 #
// 改变hash值不会重新加载页面
// hash改变会触发hashChange事件，只改变#后边的url片段， hash发生变化url会被
// 浏览器记录，从而可以使用浏览器的前进和后退

// history模式主要通过history Api的pushState() 和 replaceState()俩个方法来实现
// 刷新操作时会请求服务器，当前端请求地址和服务器不一致时，会报404

react-router是建立在history之上

// 1、BrowserRouter：浏览器的路由方式，也就是在开发中最常使用的路由方式
// 2、HashRouter：在路径前加入#号成为一个哈希值，Hash模式的好处是，
// 再也不会因为我们刷新而找不到我们的对应路径
// 3、MemoryRouter：不存储history，所有路由过程保存在内存里，不能进行前进后退，
// 因为地址栏没有发生任何变化
// 4、NativeRouter：经常配合ReactNative使用，多用于移动端
// 5、StaticRouter：设置静态路由，需要和后台服务器配合设置，比如设置服务端渲染时使用

四、子路由

Vue-router

// router文件下下的index.js

/* 
  路由定义
*/
Vue.use(VueRouter)

const routes = [{
        path: '/test',
        name: 'test',
        component: () => import('../views/test'),
        children: [{
            path: 'children',
            name: 'children',
            component: () => import('../views/children')
        }]
}]
const router = new VueRouter({
    routes,
})
export default router;

React-Router

// 父组件中
import React, { Component } from 'react';
import children from './children.js'

class FatherPage extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
            <div>
                这是父页面的内容！
            <Switch>
              <Route path='/father/children' component={children}/>
            </Switch>
            </div> 
        );
    }
}
 
export default FatherPage;

五、路由传参跳转

1. Vue

动态路由和query属性传值页面刷新参数不会丢失， params会丢失

动态路由

const routes = [
    {
        path: '/detail/:id',
        name: 'detail',
        component: Detail
    }
]

// 页面跳转
this.$router.push('/detail/' + id)

// 获取参数
this.$route.params.id

params传值(类似于post)（刷新页面数据会丢失）

const routes = [
    {
        path: '/detail',
        name: 'detail',
        component: Detail
    }
]

// 页面跳转
this.$router.push({
    name: detail,
    params: {
        id: 1
    }
})

// 获取参数
this.$route.params.id

query传值:类似于get（刷新页面不会丢失）

const routes = [
    {
        path: '/detail',
        name: 'detail',
        component: Detail
    }
]

// 页面跳转
this.$router.push({
    path: '/detail',
    query: {
        id: 1
    }
})

// 获取参数
this.$route.query.id

2.React

通配符传参(刷新页面数据不会丢失)

//定义路由

<Route path='/path/:id' component={Path}/>


//在路由点击跳转的时候

<Link to="/path/1">通配符</Link>
// 或者
this.props.history.push('/path/1');


//另一个页面接收传来的参数

this.props.match.params.id

query传参（刷新页面数据会丢失）

this.props.history.push({pathname:'/home', query: {id: '6666'}});
// 接收参数
this.props.location.query.id;

state传参（刷新页面数据会丢失）

this.props.history.push({pathname:'/hone', state:{id: '666'}})
// 接收
this.props.location.state.id;

直接通过url拼接传参

// 跳转方式
this.props.history.push(`/home?${a=1}`) 
// 获取参数
this.props.location.search // "?a=1"

六、路由守卫

vue:

全局守卫：每次路由跳转时都会触发

全局前置守卫：路由跳转前，进行操作--router.beforeEach

全局后置守卫：路由跳转后，进行一些操作--router.afterEach

路由独享守卫：可以再路由配置直接定义beforeEnter守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的守卫