Transition from page to page without router

Questions
1

Framework v2:

How do I transition from page to page when all pages are within index.html?

<view class="view view-main">
<div id="page_1" class="page" data-name="page-1">
<div class="block">
	<a href="#page_2" class="back">Go to page 2</a>
</div>
</div>
<div id="page_2" class="page" data-name="page-2">
<div class="page-content">
<div class="block">
	<a href="#page_1" class="back">Go to page 1</a>
</div>
</div>
</div>
<view>

The above does not work and when index.html is rendered, “page_2” is shown (instead of “page_1”). When clicking link “Go to page 1”, it also does not work.

Using “router”, it works. However, for such simple cases where all pages are within index.html. How should I do that?

I did remember, with Framework v1, such use cases also worked. How to do that with v2?

2 
<div class="page stacked" data-name="page-2"> 

{
  path: '/page-2/',
  pageName: 'page-2',
}

read docs
your life will become easier

2 Likes
3

Okay, I it works, but only once. I have a simple page with two pages as described above. Clicking link on page1, it navigates to page2. Clicking link on page2, it navigates back. But clicking the link (to page2) again on page1, I will get this error and the navigation does not happen:

Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (1535100 px). Occurrences of will-change over the budget will be ignored. (actual version of firefox - console)

Using ajax-router, all works. But with “stacked”, it only works one time.

4

something is wrong with your layout

<!-- <view class="view view-main"><view> -->
<div class="view view-main"></div>

<!-- <a href="#page_2" class="back">Go to page 2</a> -->
<a href="/page-2">Go to page 2</a>

check ALL your code
or simply copy/paste from kitchen-sink

5

I changed the layout from above. Do not find the layout problem. I will search and report…

6

Make sure you have enabled stackPages: true on View init

7

yes, that was the reason. Thanks!