三大主流框架的路由
三大主流框架的路由
React
React Router
一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。
安装依赖
建议使用2.2.1版本的依赖
npm install [email protected] –D
准备组件
importReact from 'react'
import{ render } from 'react-dom'
import{ Router, Route, Link, browserHistory } from 'react-router’
react-router中定义了history这个属性 用于方便管理路由的方向browserHistory
Link
定义链接的组件，类似于a标签。
{this.props.children}＝＝相当于路由试图的容器
定义路由
render(
, document.getElementById('root'))
Path===设置路由路径
Component＝＝设置该路径要加载的组件
索引IndexRoute
指定默认情况下加载的子组件。你可以把IndexRoute想象成某个路径的index.html。
例如：
地址栏传参
定义：
取得参数：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
加载视图<div ng-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
加载视图<div ui-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
路由路径由
路由对应视图 通过加载组件 加载到
配置路由的步骤：
1）定义组件－－（试图加载的内容组件）
Eg：
var Home={
template:'
}
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）
父级路由
子路由
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的值为设置的路由路径
name属性设置路由视图名字－－无名字默认default
多个视图都要加载
{ path:'/index',name:'index',
components:{default:index,page:about}
},