三大框架路由

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"
    })
}])