Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
RE: Vue Router inside Liferay 7.1
Hello,
I try to create a small Vue application inside of Liferay together with the Vue Router, but when I navigate between Liferay navigation (Senna.js) and my Vue application the History.back doesn't work as expected.
I go back to the previous Liferay page
Actual:
My url changes, but the page doesn't go back to the last Liferay page.
Marco
I try to create a small Vue application inside of Liferay together with the Vue Router, but when I navigate between Liferay navigation (Senna.js) and my Vue application the History.back doesn't work as expected.
- Switch between some Vue routes
- Go to another Liferay page
- History.back
I go back to the previous Liferay page
Actual:
My url changes, but the page doesn't go back to the last Liferay page.
Marco
I just recently had the same issue. Finally managed to make a (sort of hacky) solution: Put this code snippet in your jsp:<script data-senna-track="permanent">
window.addEventListener("popstate", function(event) {
if(document.getElementById("YOUR-UNIQUE-ID")==null){
location.reload();
}
});
</script>
Replace YOUR-UNIQUE-ID with the id of an html element unique to your portlet, that is visible in all routes (so for example one of the generated portlet wrapper divs.This code snippet triggers whenever the popstate changes to the history, anytime your portlet changes the popstate. The data-senna-track="permanent" ensures the snippet is persisted even when you navigate away from the page. (this means you must not turn off senna SPA for your portlet). As long as your portlet is visible, and you navigate between routes by clicking links or back/forth button navigation, the script does nothing. However, if you navigate back to the page, and your portlet is no longer rendered, it will trigger, and refresh the page, so your application works again.I've only tested in chrome and firefox, but I don't see why this shouldn't work for all browsers that support html5 navigation api.
window.addEventListener("popstate", function(event) {
if(document.getElementById("YOUR-UNIQUE-ID")==null){
location.reload();
}
});
</script>
Replace YOUR-UNIQUE-ID with the id of an html element unique to your portlet, that is visible in all routes (so for example one of the generated portlet wrapper divs.This code snippet triggers whenever the popstate changes to the history, anytime your portlet changes the popstate. The data-senna-track="permanent" ensures the snippet is persisted even when you navigate away from the page. (this means you must not turn off senna SPA for your portlet). As long as your portlet is visible, and you navigate between routes by clicking links or back/forth button navigation, the script does nothing. However, if you navigate back to the page, and your portlet is no longer rendered, it will trigger, and refresh the page, so your application works again.I've only tested in chrome and firefox, but I don't see why this shouldn't work for all browsers that support html5 navigation api.
Thanks mate I went with something similiar. I got also inspiration from this repo over here:
https://github.com/triberay/liferay-vuejs-routing-experiment
It's still not great, but I'm on it.
https://github.com/triberay/liferay-vuejs-routing-experiment
It's still not great, but I'm on it.
Copyright © 2025 Liferay, Inc
• Privacy Policy
Powered by Liferay™