Level 27
@stingoosha You could simply create a link to the previous URL:
<a href="{{ url()->previous() }}">...</a>
2 likes
Feb 24, 2021
9
Level 1
Laravel + Inertia How to create "Back" link
Hi, In my project I use Laravel with Inertia. I would like to open some product from different pages (for example, from main page, catalog or search page) and have possibility to return to this page clicking "Back" link.
I've tried to use "return redirect()->back();" in route, but suppose this construction is not for such purposes!
Could You please help me to implement this?
Thanks!
Level 12
Add the back method in Vue
methods: {
back() {
window.history.back();
},
}
and use an anchor tag:
<a href="#" @click="back">Back</a>
13 likes
Level 1
Thank You very much! That is exactly I was searching!
1 like
Level 6
@P-James Awesome, this worked for me - thanks!
For those who stumble upon this later and who are using the composition API with the method, this is how to reformat it:
function back()
{
window.history.back();
}
And then use the anchor tag in the template as per the original solution.
As an alternative, you could use:
let back = function()
{
window.history.back();
}
I don't know if one is better than the other. They both seem to work just fine though.
1 like
Level 6
Two weeks later: I find myself in need of a back button in a different project. Completely forgot I had already solved the issue before, so I turn to google and end up here (again!). Lo and behold, I find my own solution. LOL
2 likes
Level 4
Great & simple solution!
When I used this, however, it didn't work (Aug 2022 on Brave)..
I changed it to
<a href="#" onclick="history.back();return false;">Go Back</a>
And this works! (Credits to this stackoverflow answer)
2 likes
Level 7
I run into a bug with this method where sometimes the previous URL is a different site. Is there a way to avoid going back if it will take the user to another site?
Level 1
Another way is to use App\Providers\AppServiceProvider.php to defined previous URL as follows:
Inertia::share([
//....
'urlPrev' => function() {
if (url()->previous() !== route('login') && url()->previous() !== '' && url()->previous() !== url()->current()) {
return url()->previous();
}else {
return 'empty'; // used in javascript to disable back button behavior
}
},
]);
Inside your Vue component using the Composition API you can do the following:
//...
import { usePage } from '@inertiajs/inertia-vue3'
import { Inertia } from '@inertiajs/inertia'
setup() {
let urlPrev = usePage().props.value.urlPrev
const back = () => {
if (urlPrev !== 'empty') {
Inertia.visit(urlPrev)
}
}
return {
// other exports...
back,
}
}
On the template:
<!-- ... -->
<button @click="back">go back</button>
6 likes
Level 8
Thanks for this solution @waiylkarim !!
Please or to participate in this conversation.