VueRouter和ReactRouter路由对比

本质区别

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

一、引入方式不一样

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中

  
  
 

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

react-router常用组件：、、

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

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

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

	 
这是内联组件写法
} />
	//嵌套组合方式
	 (
		
			
		
	) />

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

 (
		

			
		
	) 
/>

三、 路由模式

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 ( 
            

                这是父页面的内容！
            
              
            
            
 
        );
    }
}
 
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

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

//定义路由




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

通配符
// 或者
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) => {
        // ...
      }
    }
  ]
})

     组件内的守卫

• beforeRouterEnter
• beforeRouterUpdate
• beforeRouterLeave