Access PWA App Inner Page By a Link

Questions
1

Inner Page Link : https://app.uvote.unify.lk/#!/uvote-card/mOo2S2EzAmBMbgeVm0Hm/

My app has Main View which list cards, Right Panel gives links to user login and log out. Also, About Us page and card page to view single card by ID.

Screen Shot 2020-04-16 at 7.28.58 PM

Here is my routes

// Index page
{
    path: '/',
    componentUrl: './pages/home-page.html',
    name: 'home',
},
// About page
{
    path: '/about/',
    url: './pages/about.html',
    name: 'about',
},
// uVote card page
{
    path: '/uvote-card/:cardId/',
    componentUrl: './pages/uvote-card.html',
    name: 'uvote-card',
},

The right panel is available to access from the uVote card page. Here is the HTML for the panel.

<div class="navbar-inner sliding">
    <div class="left">
        <a href="#" class="link back">
              <i class="icon icon-back"></i>
        </a>
    </div>
    <div class="title sliding">Unify Votes</div>
    <div class="right">
          <a href="#" class="link icon-only panel-open" data-panel="right">
              <i class="icon f7-icons">person_circle</i>
          </a>
    </div>
    <div class="title-large">
         <div class="title-large-text">Unify Votes</div>
    </div>
</div>

When I access the Single Card Page by the LINK the app is loading properly and it show the single card. The issue is on the Right Panel. When open the Right Panel; it repeats the Single Card Page again inside the Right Panel

Screen Shot 2020-04-16 at 7.25.30 PM

Also the back button does not goes to Main View

How to prevent this and fix the back button?

2

Back button able to fix by changing like below

<div class="left">
    <a href="/" class="link icon-only">
          <i class="icon icon-back"></i>
    </a>
</div>
3

Did you enable pushState for View inside of right panel? Then it must be disabled. Also make sure View in the right panel has explicitly specified initial route URL

4

Thanks!

pushState enabled globally in app and not in right panel. The Right Panel was inside the index.html and not as a separate page or panel.

I’ve fixed it by creating Right Panel as separate panel using route.

1 Like