vue路由和react路由对比

https://www.jianshu.com/p/8b94f1b98578
这是一篇vue和react的对比博文。推荐给各位。
https://router.vuejs.org/zh/vue-router的中文官网

vue路由

定义在根实例里跟data同级

<router-view></router-view>//视图区域
<router-link  to="/pro?name="bobo"></router-link>//第一种传参形式
<router-link  to="/pro/age"></router-link>//第二种传参形式,推荐使用的，需要在路由跳转配置“/:age”下面pro的子组件用的
var pro= {
          template:`<h1></h1>`
      }

 new Vue({
   data:{},
    router:new VueRouter({
      routes:[
         {
            path:"/",//路径
            component:"index"//组件
          }，
           {
            path:"/pro",//路径
            component:"pro"//组件
          },
           {
            path:"/res",//路径
            component:"res"//组件
            children:[
              {
                path:"",//路径要是空
                comonent:"res_index"//代表默认子组件
                },
               {
                  path:"pro",//路径  ,此处子路由不能加“/”，“/”代表根目录
                  component:"pro/:age"//组件,第二种传参形式
                  }
             ]
          }

    ]
  })
})
  

vue路由传参形式，以及接受参数方法

第一种最原始的

  <router-link  to="/pro?name="bobo"></router-link>//第一种传参形式

接受参数

var pro= {
          template:`<h1> pro{{$route.query.name}}</h1>`//注册到根实例里的router具有全局性
      }

第二种推荐的，参考上面的配置

 <router-link  to="/pro/age"></router-link>//第二种传参形式,推荐使用的，
需要在路由跳转配置“/:age”

接受参数

var pro= {
          template:`<h1> pro{{$route.params.name}}</h1>`//注册到根实例里的router具有全局性
      }
  js中通过this.$route.params.name获取

react 路由

用于提高大家学习react
https://react.docschina.org/ react官网
http://react-china.org/t/react-router4/15843 react-router4的api
http://react-guide.github.io/react-router-cn/docs/API.html react-router的api

react 路由，使用 React-router-dom。

<Router>
          <div className="App">
                  {//用link这里的大括号，是为了让注释生效。jsx的语法
                       //  <Link  to= {{
                       //    pathname:"/Father",
                       //    search:"?id=9999",//第一种传参形式
                       //    hash:"$thehash",
                       //    state:{fromDashboard:true} //在link里用to 指定模板并传参
                       //  }}>{store.getState().wfather}</Link>
                       //  <Link  to= "/Child">{store.getState().wchild}</Link>
                       // <Switch>
                       //  <Route path="/Father" component={Father}/>
                       //  <Route path="/Child" component={Child}/>
                       //  </Switch>
                        }
                         <NavLink  exact  to= "/">index</NavLink >
                        <NavLink  to="/Father/22222/bobo">{store.getState().wfather}</NavLink >//跟link的作用一样，相当于a标签
                        //和vue的第二种传参形式很想
                        <NavLink   to= "/Child">{store.getState().wchild}</NavLink >//第二种传参形式，需要在下面定义
                       <Switch>//Switch常常会用来包裹Route，它里面不能放其他元素，用来只显示一个路由。
                         <Route exact  path="/" component={index}}/>//exact强制路径,找的"/"就不向下找了
                        <Route path="/Father/:id/:name" component={Father}/>
                        <Route path="/Child" component={Child}/>//视图区域
                        </Switch>
              
          </div>

 </Router>

react路由传参形式，以及接受参数方法

NavLink比link的api更多，而且他的传参形式更接近，vue的推荐形式
在class创建的组件中我们需要通过this.props.match获取信息

  this.props.match //这个对象有传的参数
  this.props.match.params//获取参数并处理，这是针对Navlink传参