我想从 page4.html 返回主页而不使用菜单，但出现此错误
Error: You can not supply no "ons-page" element to "ons-navigator
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sliding Menu</title>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css'>
</head>
<body onload="_l='t';">
<ons-sliding-menu
menu-page="menu.html" main-page="home.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" onclick="menu.setMainPage('home.html', {closeMenu: true})">
<ons-icon icon="fa-plus"></ons-icon>
Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="home.html">
<ons-navigator var="myNav">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Home</div>
</ons-toolbar>
<ons-list>
<ons-list-item onclick="myNav.pushPage('page1.html')">
go to page 1
</ons-list-item>
<ons-list-item onclick="myNav.pushPage('page2.html')">
go to page 2
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
</ons-template>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Page1</div>
</ons-toolbar>
<ons-list>
<ons-list-item onclick="myNav.pushPage('page3.html')">
Page3
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Page2</div>
</ons-toolbar>
<ons-list>
<ons-list-item onclick="myNav.popPage();">
back to Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page3.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Page3</div>
</ons-toolbar>
<ons-list>
<ons-list-item onclick="myNav.pushPage('page4.html');">
go to page 4
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page4.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Page4</div>
</ons-toolbar>
<ons-list>
<ons-list-item onclick="myNav.pushPage('home.html');">
back to Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js'></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js'></script>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-6c99970ade81e43be51fa877be0f7600.js"></script>
<script>
ons.bootstrap();
</script>
</body>
</html>
您可以尝试使用codepen http://codepen.io/marcocalta/pen/azeozL 谢谢!
最佳答案
它不起作用的原因是您正在使用 resetToPage()前往 home.html这不是 <ons-page>元素。
解决这个问题的一种方法是拉出 <ons-page>导航器中的元素并将其放入模板中。如果你命名它 page0.html你可以做resetToPage('page0.html') .
我已经更新了您的 Codepen: http://codepen.io/argelius/pen/XJvWGL
关于温泉ui-回到家，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29603921/