react router 和vue-router的子路由对比

路由配置是前端经常用到的功能，两个代表就是react router和vue-router：
下面用代码对比一下:

先是react的基于dva(react router v4)

项目的结构路径

router.js

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import FatherPage from "./views/test/index";
import children from "./views/test/children";


function RouterConfig({history}) {
  return (
    
      
        
        // 这里不能使用exact！！！
        
      
    
  );
}

export default RouterConfig;

./views/test/index.js 的内容：

import React, { Component } from 'react';
import children from './views/test/children.js'

class FatherPage extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
            

                这是父页面的内容！
            
              
            
            
 
        );
    }
}
 
export default FatherPage;

./views/test/children.js :

import React, { PureComponent } from 'react';

class Child extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
这子页面里面返回的数据
 );
    }
}
 
export default Child;

在Vue-router中：

首先是router的index.js:

import Vue from "vue";
import VueRouter from "vue-router";

/* 
  路由定义
*/
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;

然后是father.vue:

然后是children.vue: