三大框架路由

vue中的路由

• 引入vue-router

import Router from 'vue-router'

• 配置路由

new VueRouter({  routes: [    {      path: '/',      component: Hello    }  ]})

• 触发路由

<router-link to="/a">跳转页面</router-link><router-view></router-view> //跳转位置

react 路由

• 引入react-router

 import {link,Route,Router,IndexRoute,browserHistory} from 'react-router'

• 渲染路由

ReactDOM.render(<Router history={browserHistory}>    <Route path="/" component={App}>        <IndexRoute component={HomeList}></IndexRoute>        <Route path="/detail/:id" components={Detail}></Route>    </Route></Router>, document.getElementById('example'));

• 触发路由

<link to={"/home/"}>点击路由</link>

• 路由的位置

{this.props.children} //路由位置

angular

有引入的第三方插件ui-router、官网上推荐的插件ng-router

• 引入插件

<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-route.js"></script>

• 路由配置

var app = angular.module("app1",["ngRoute"]);app.config(["$routeProvider",function($routeProvider){    $routeProvider.when("/aaa",{        template:"<h2>哈哈哈</h2>"    }).when("/bbb",{        template:"<h2>吼吼吼</h2>"    }).when("/ccc",{        template:"<h2>啊啊啊</h2>"    }).otherwise({        redirectTo:"/aaa"    })}])