如何使用 ui-router 路由嵌套 ?

我的问题

网上看到的一个示例

我做了点修改

修改图示

index.html: 我希望入口这里能只留下一个 ui-view

clipboard.png

app.js: 加上了状态 main

clipboard.png

添加一个文件 main.html

clipboard.png

结果

无法像原示例那样正常工作,我对 ui-router 不是很熟,文档也不详细,难道 ui-view 是不能嵌套多次?我想应该不至于,希望有了解的人能帮个忙,调通我那份代码,能够和原示例一模一样的效果就行了。

期望

  1. 入口 index.html 只保留 <div ui-view></div>

  2. 可能是 app.js 配置出错,希望有人能帮我配对

阅读 3k
1 个回答

1、index.html中angular引入改为https,因为你的网址是https,加载angular会被block,出现问题如下

clipboard.png

应该在index.html中,修改angular引入为https

 <script src="https://code.angularjs.org/1.2.13/angular.js"></script>

2、 再接着,可以看到页面已经正常显示了,但是路由不是嵌套的,那么修改为嵌套的。
在app.js中,给子路由添加前缀,如下图

clipboard.png

3、最后,再修改一下main.html中navbar的链接即可

clipboard.png

默认首页:

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进