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 (
    <Router history={history}>
      <Switch>
        <Route path="/home" exact component={Home} />
        // 这里不能使用exact！！！
        <Route path='/father' component={FatherPage}/>
      </Switch>
    </Router>
  );
}

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 ( 
            <div>
                这是父页面的内容！
            <Switch>
              <Route path='/father/children' component={children}/>
            </Switch>
            </div> 
        );
    }
}
 
export default FatherPage;

./views/test/children.js :

import React, { PureComponent } from 'react';

class Child extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( <div>这子页面里面返回的数据</div> );
    }
}
 
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:

<template>
  <div id="test" style="width:90%">
    <div>father page</div>
    <router-view />
  </div>
</template>

然后是children.vue:

<template>
    <div id="children">
        children page
    </div>
</template>