vue路由和react路由对比

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

vue路由

定义在根实例里跟data同级

//视图区域
//第一种传参形式
//第二种传参形式,推荐使用的，需要在路由跳转配置“/:age”下面pro的子组件用的
var pro= {
          template:`
`
      }

 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路由传参形式，以及接受参数方法

第一种最原始的

  //第一种传参形式

接受参数

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

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

 //第二种传参形式,推荐使用的，
需要在路由跳转配置“/:age”

接受参数

var pro= {
          template:`
 pro{{$route.params.name}}
`//注册到根实例里的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。

          

                  {//用link这里的大括号，是为了让注释生效。jsx的语法
                       //  {store.getState().wfather}
                       //  {store.getState().wchild}
                       // 
                       //  
                       //  
                       //  
                        }
                         index
                        {store.getState().wfather}//跟link的作用一样，相当于a标签
                        //和vue的第二种传参形式很想
                        {store.getState().wchild}//第二种传参形式，需要在下面定义
                       //Switch常常会用来包裹Route，它里面不能放其他元素，用来只显示一个路由。
                         //exact强制路径,找的"/"就不向下找了
                        
                        //视图区域
                        
              
          

 

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

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

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