Navigating in a Single Page App

Questions
1

What is the proper way to navigate to a route without a page load, as in a SPA (Single Page App)?

I’m confused about when to use a

<div id="view-about">

and link with simply

<a href="#view-about">

versus a view with a dataname

      <div class="view">
        <div class="page" data-name="about">
          <div class="page-content">
               About us -- we are...
          </div>
        </div>
      </div>

Is there a syntax for the routes that says “load this template/view, no reason to make a web request because it’s already in the DOM”.

I’m almost sure there is a way, but I don’t know the syntax.

Thx.

Tac

2

I thought I found it, pageName:

but that’s not working, evidently it only works with stackedPages. :frowning:

3

image
image1034×341 22.3 KB

This is documented for version 8 – does it still exist?

4

I’m having the same issue getting a single view app to swap in new componentUrl pages. Of course I am also updating a very old project from 2019 (v4.0) to the latest. In that old version I made a tabbed element and views for each page and then needed to force refreshPage then after the user logged in or logged out. I used stackedPages then too. This new world v8+ have evolved but not sure how to pull off a single page app. I don’t see any dynamic page examples. There is the kitchensink but thats static href linking to routes after the user clicks on a panel item.

Okay, will continue my hunt for the new way and report back if I find it.