Hi Everyone,

I am working on a project using Laravel, InertiaJS and Vue3. I am stuck at one point and looking for help.

Problem Statement

From page1, I need to navigate to page2, perform some action and move back to page1 and refresh page1 (because the action in page 2 changes some states in the database).

NOTE: url of page1 is dynamic (like: /products/product1, /products/product2 etc.)

Try 1:

In page1 component, in script setup, I have a click handler to navigate to another page as below:

function navigateToAnotherPage {
  router.visit('/page2');
}

After performing the action in page 2, in script setup, I have another click handler to go back to the previous page as below:

function navigateBack {
  window.history.back();
}

This does take me back to the previous page (page1), but it does not refresh the page. I have refresh page1, because the action in page2 updates some data in the database, which are being used in page1.

Try 2:

In the second option I tried, in page1 component, in script setup, I have a click handler to navigate to another page as below:

function navigateToAnotherPage {
  router.visit('/page2', {
    replace: true,

    headers: {
      'referrer': router.page.url
    },
  });
}

I wanted to replace page1 with page2 specifying the url of page1 to page2 as a parameter in header. I would then perform the action in page2 and make a visit back to page1. But then chrome complains as 'Refused to set unsafe header "referrer"'.

Try 3:

I modified the click handler in page1 component as below:

function navigateToAnotherPage {
  router.visit('/page2', {
    replace: true,

    data: {
      'referrer': router.page.url
    },
  });
}

In this case, the referrer is passed as a query parameter and I do not know how to access query parameter with inertia's router.

Try 4:

I then tried using forceFormData as true in the click handler of page1.

function navigateToAnotherPage {
  router.visit('/page2', {
    replace: true,

    data: {
      'referrer': router.page.url
    },

    forceFormData: true,
  });
}

Now I do not know how to access the referrer parameter from router.form.

Could anyone please help? Thanks in advance.