Laravel Inertia using browser back button reloads entire page component

Hello, I have a laravel, Vue 2 webapp and am trying to implement history.pushState so I can change the URL without making requests. I am able to manually add history like this: window.history.pushState(window.history.state, '', '/files'+child.path) When I hit the back button my page component is completely re-built which isn't ideal because I have a lot of initialization tasks.

For testing purposes I also tried using inertia directly with the same results:

this.$inertia.visit('/files'+child.path, {
        method: 'get',
        preserveState: true,
        preserveScroll: true,
        only: ['files'],
      });

Back button still reloads the entire page component.

Has anyone found a solution for this?

Thanks!

CamKem

3 years ago

Level 10

Hello, I have found a solution to this.

Firstly you need to track the previous URL by setting up a prop that is tracked. This is done by adding an object to be passed through in App/Providers/AppServiceProvider.php. The following code will replacing the boot function (or if you are already passing objects/variables to the props just adding the 'urlPrevious' to your code) - also alternatively you can add thing into HandleInetiaRequests.php middleware & this would probably be a better location for this.

    public function boot(): void
    {
        // inertia share data
        Inertia::share([
            'urlPrevious' => url()->previous(),
        ]);
    }

Then in your Vue component, you need to add the following code to the script tag

// create a variable to hold the previous page url
let urlPrev = usePage().props.urlPrevious
// create a function to go back to the previous page via ajax request
const backPage = () => {
    router.visit(urlPrev)
}

This will allow you to now call the "backPage" function in your inertia Link tag, you could use something like this:

        <Link @click="backPage">
            Back to previous page
        </Link>

This solution works well & gives you a prop that can be useful in other places too.

However alternatively, you can use this and it will work. Then you don't need all the extra code and props set up, however there is times this could cause issues, such as if you have any partial reloads or anything that will cause the history to show the previous page as the same page you are on. I have run into this problem, so I worked out the solution above.

@click.prevent="window.history.back()"

I hope this helps you & anyone else that runs into this issue when they are searching for it. I have seen this question come up in the forums a few times so this should (fingers crossed) prevent more reposts of the same issues / question.

1 like