三大框架路由

最新推荐文章于 2024-06-11 18:14:01 发布

luzhongk

最新推荐文章于 2024-06-11 18:14:01 发布

阅读量274

点赞数

分类专栏：框架文章标签：路由

本文链接：https://blog.csdn.net/luzhongk/article/details/71177097

版权

框架专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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