三大主流框架的路由

三大主流框架的路由

React

React Router

        一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。

 

安装依赖   

建议使用2.2.1版本的依赖

npm install react-router@2.2.1 –D

 

准备组件

importReact from 'react'

import{ render } from 'react-dom'

import{ Router, Route, Link, browserHistory } from 'react-router’

react-router中定义了history这个属性 用于方便管理路由的方向browserHistory

 

Link

定义链接的组件，类似于a标签。

<Link  to=“/users>/users</Link>

{this.props.children}＝＝相当于路由试图的容器

 

定义路由

render(<Router history={browserHistory}>

                   <Routepath="/web/demo.html" component={Demo}>

                            <Routepath="/home" component={Header}></Route>

                            <Routepath="/about" component={Con}></Route>

                   </Route>

</Router>, document.getElementById('root'))

Path===设置路由路径

Component＝＝设置该路径要加载的组件

 

索引IndexRoute

指定默认情况下加载的子组件。你可以把IndexRoute想象成某个路径的index.html。

例如：

<Routepath="/" component={App}>

         <IndexRoute component={Index}/>

</Route>

 

地址栏传参

定义：

<Link to=“/users/1>users</Link>

<Route path="/user/:xxxx" component={User}/>

取得参数：this.props.params.xxxx==1

Angular

•    AngularJS 路由允许我们通过不同的URL 访问不同的内容。

•    AngularJS 模块的config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider（ng路由）注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

•    $routeProvider 为我们提供了when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

•    第一个参数是URL 或者 URL 正则规则。

•    第二个参数是路由配置对象。

•    //路由配置在config中；

•    $routeProvider.when(url（path路径）,

•    { template: string,

                    templateUrl: string,

}) .otherwise({redirectTo:string});

$routeParams.id＝＝存储数据url值

｛｛$index｝｝当前选中下标

 

参数说明

•    template:如果我们只需要在 ng-view中插入简单的 HTML 内容，则使用该参数：

•    templateUrl:如果我们只需要在 ng-view中插入 HTML 模板文件，则使用该参数：

•    redirectTo:重定向的地址。Otherwise的方法

•    路由功能是由routeProvider服务 和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过routeProvider 配置路由的映射。

 

 

NgRoute

加载视图<divng-view></div>

angular.module('app',['ngRoute'])

  .config(['$routeProvider',function($routeProvider){

    $routeProvider

    .when('/home',{

      templateUrl:'template1/home.html'

    })

    .when('/about',{

      templateUrl:'template1/about.html'

    })

    .when('/other',{

      controller:'ctrl',

      templateUrl:'template1/other.html'

    })

    .when('/list/:id',{

      controller:'ctrl1',

      templateUrl:'template1/list.html'

    })

    .otherwise({redirectTo:'/home'})

   

  }])

  .controller('ctrl',function($scope,$http){

    $http({

      method:'get',

      url:'demo.json'

    }).success(function(data){

      $scope.arr=data

     

    })

  })

.controller('ctrl1',function($scope,$http,$routeParams){

    $http({

      method:'get',

      url:'demo.json'

    }).success(function(data){

      $scope.pro=data[$routeParams.id].con

    })

  })

uiRoute

加载视图<divui-view></div>

angular.module('app',['ui.router'])

.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

    $stateProvider

    .state('home',{

      url:'/home',

      templateUrl:'template/home.html'

    })

    .state('about',{

      url:'/about',

      controller:'ctrl',

      templateUrl:'template/about.html'

    })

    .state('other',{

      url:'/other',

      controller:'ctrl1',

      templateUrl:'template/other.html'

    })

    .state('list',{

      url:'/list/:id',

      controller:'ctrl2',

      templateUrl:'template/list.html'

    })

   

    $urlRouterProvider.otherwise('home')

  }])

  .controller('ctrl',function($scope){

    $scope.str='nihao woshi gaoxiaowan'

  })

  .controller('ctrl1',function($scope,$http){

    $http({

      url:'demo.json'

    }).success(function(data){

      $scope.arr=data

      console.log(data)

    })

  })

.controller('ctrl2',function($scope,$http,$stateParams){

    $http({

      url:'demo.json'

    }).success(function(data){

      $scope.pro=data[$stateParams.id].con

      console.log(data[$stateParams.id].con)

    })

  })

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Vue

Vue-router.min.js

路由路径由  <router-link></router-link>标签配置  标签内  to属性值规定改标签指向的path路径

<router-linkto="/home">去首页</router-link>

<router-linkto=“/news”>去新闻</router-link>

路由对应视图  通过加载组件  加载到<router-view></router-view>上

 

配置路由的步骤：

1）定义组件－－（试图加载的内容组件）

Eg：

var Home={

    template:'<div>这是一个首页的页面</div>'

}

2）配置路由 定义路由

Path 属性 配置路由地址       “＊”默认路径下    redirect 属性配置路由重定向 

component 属性 配置改地址需要加载的组件视图

Eg：

var  routes=[

        {path:'/home',component:Home},

        {path:'/news',component:News},

        { path: '*', redirect: '/news' }  /*路由的重定向*/

    ]

3）实例化VueRouter

    var  router=new VueRouter({   /*router 老老实实的写这个名字*/

        routes:routes   /*VueRouter里面的属性名称不能变  routes  */

    })

4）VueRouter挂载到Vue实例上面去

var app=new Vue({

        router:router,

        el:'#out'

})

 

 

存储路径参数    path：“／index／：id”

获取  $route.params.id

路由嵌套  配置规则

1）

父级路由

<router-link to="/home">首页</router-link>

<router-link to=“/user”>用户</router-link>

<router-view></router-view>

子路由

<templateid="user">

    <div>

        <router-linkto="user/username">去子路由</router-link>

        <!--子路由视图显示的地方-->

        <router-view></router-view>

    </div>

</template>

2）配置路由 定义路由

子路由配置

        {

           path:'/user',component:User,

            'children':[   /*定义自组件的路由*/

                {

                   path:'username',component:UserName,   /*注意：子路由前面的斜杠*/

                }

            ]

        },

其他步骤一样

子路由储存参数

'children':[

                                     {path:':aa',component:aaa}

                            ]

$route.params.aa取值

同路由内，视图切换通过watch检测路由参数更改

watch:{

         '$route'(to,from){

         }

}

子路由重定向路径－－默认显示

{path:‘/about’,redirect:‘/about/0’}

意思：当路径为/about 时自动指向 /about/0

路由命名

路径的另一种定义方式   绑定属性to  对象 name的值为设置的路由路径

<router-link:to=“{name:‘index’}”>首页</router-link>

name属性设置路由视图名字－－无名字默认default

<router-viewname=‘page’></router-view>

多个视图都要加载

{   path:'/index',name:'index',

         components:{default:index,page:about}

},