Nested Navigation on initial load

Questions
1

I’m attempting to get a child route to load properly nested on initial page load in a PWA. I have the following routes (below) and want an initial page load to /about/ to be able to go ‘back’ and have it go to the root view. This works where the app does animate the view away to show the root view underneath, but the browser then goes back itself to the previous webpage I had open. I do have :push-state="true" enabled on my main view.

var routes = [
  {
    path: '/',
    component: HomePage,
    routes: [
      {
        path: '/about/',
        component: AboutPage,
      },
    ]
  },
];
2

Я не совсем понял, в чем проблема? При создании view указываете url : ‘/’, затем в методе init() роутер загружает страницу /about/, теперь она будет второй в истории.

3

Which is happening, but a single click of the ‘back’ button not only takes the app back to the root view, but it also triggers the browser to bo back in history which takes it to my previous website.

4

Покажите код создания view

5

@shastox https://gist.github.com/alex-phillips/8dec403a4cbe1723d18088c96cc90533

6

Вы не написали, что используете Vue. В таком случае вам лучше подождать ответ от специалиста по F7 + Vue.

7

Anyone else’s input on this would be great. I simply want to be able to open a route from a direct URL and have the necessary routes automatically added to the navigation stack.

8

This is default browser behavior and can’t be affected if user presses Browser’s back button. On your UI’s back button, you can do the following:

// go back to home page without affecting history
v.router.back('/', { force: true, pushState: false }); 
// replace browser url to home page
window.history.replaceState({}, '', '/')

Where v - your relevant view

9

Is there a way to hook on the back button genrally? without doing a method/function for every back button?

10

Для кнопки “назад” вы можете использовать data-параметры: https://framework7.io/docs/view.html#linking-between-pages-views

Можно также обрабатывать события: https://framework7.io/docs/page.html#page-events

11

You can do your own back button then (prevent-router class is mandatory)

<a class="link back prevent-router custom-back-button">...</a>

$(document).on('click', '.custom-back-button', () => {
  // use code from example above
})

But i would avoid doing it as it will break other scenarios of back button behavior

12

How about hooking to on a.back click and depending on wethere there is something in history i either preventDefault or not? Could that theoretically work?