例子
- 代码
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/angular-ui-router/1.0.30/angular-ui-router.min.js"></script>
</head>
<body>
<h3>Main page</h3>
<div>
<div ui-view></div>
</div>
<script>
angular.module("myApp", ["ui.router"]).config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.when("","/PageTab");
$stateProvider
.state("PageTab", {
url:"/PageTab",
template: `
<div>
<h2>PageTab</h2>
<div>
<span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
<span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
</div>
<div ui-view=""></div>
</div>
`,
})
.state("PageTab.Page1", {
url: "/Page1",
template: `<h2>Page1</h2>`,
})
.state("PageTab.Page2", {
url: "/Page2",
template: `<h2>Page2</h2>`,
});
});
</script>
</body>
</html>
- 效果
- 当点击不同的导航的时候，我们就会发现下面会显示不同的标签内容
- 注意这里运行前端代码可能需要服务器
嵌套路由
有上面的例子就可以看出来，所谓嵌套路由就是路由入口一层层的嵌套，以上面的例子来解释就是
PageTab是一个路由，在这个路由中包含这里路由入口，即包含ui-view属性的标签
定义
由上面的例子我们可以看出使用语法：父路由.子路由，类似读取对象的语法来进行子路由的定义
跳转
跳转路由的状态，可以省略父路由