How can I prevent a page from being added to router history?

1

I have a New Post page that’s only available to logged in users. After users create a post, they go to the Post page, which has a Back button. I’d like to prevent the New Post page from being added to router history so the Back Button on the Post page goes back to where they started from.

[ Starting Page (any page)] —> [ New Post Page ]—> [ Post Page ]

On the Post Page, I’d like the back button to go back to Starting Page, but the history:false option in routes.js isn’t working. It always brings users back to the New Post page.

Here’s what I’m doing in routes.js:

{
    path: '/new-post/',
    options: {
      history: false,
    },
    async({ resolve, reject }) {
      if (loggedInUser) {
        resolve({ component: NewPostPage })
      } else {
        resolve({ component: LoginPage })
      }
    }
  },

Any ideas? I’ve tried moving the history: false option into the resolve function, but that doesn’t work either.

2

here => prod-glade-9k5fs1

3

@deejay I see that, but the Start Page could be any page, so I can’t add it as a specific href in the back link on Post Page. Also, sometimes people will go to a Post page directly (when reading). The only time I want to prevent going back to the previous page is when a user has just created a new post.

The documentation on Routes seems to indicate that it’s possible to control whether or not a page is added to router history. I just can’t get it to work.

4

@deejay I suppose I could manually set the href with a hack like this:

<template>
<a href="${backPagePath}" class="link back" data-force="true">Back</a>
</template>

<script>
export default (props, { $, $f7, $f7router }) => {
  let backPagePath = $f7router.history[$f7router.history.length-2];
  if (backPagePath == '/new-post/') {
    backPagePath  = $f7router.history[$f7router.history.length-3];
  }
  return $render;
}
</script>

But I was hoping to do something more elegant.

5

history and previous are two different things.

here are few options:

  1. change you app-logic-structure (make new-post in a popup)
  2. add data-reload-current="true" (but you lose animation)
//new-post page
<li>
  <a 
     href="/post-page/" 
     class="item-content item-link" 
     data-reload-current="true">
    <div class="item-inner">
      <div class="item-title">go to Post page without animation</div>
    </div>
  </a>
</li>
  1. your code seems ok
  2. if i had to, i would write it like this:
const href = $f7router.history
  .map((i,x,a,j = '/new-post/') => ({ i, j, h: a[--x] }))
  .filter(i => i.i == i.j)
  .reduce((_,i) => i.h,'#');
// or 
const href = $f7router.history
  .map((i,x,a) => ({ i, h: a[--x] }))
  .filter(i => i.i == '/new-post/')
  .reduce((_,i) => i.h,'#');

it’s longer, but faster and safer.
here => intelligent-frost-x1k8fc