RE: Vue Router inside Liferay 7.1

thumbnail
Marco Endres, modified 6 Years ago. Regular Member Posts: 112 Join Date: 8/22/12 Recent Posts
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.

  1. Switch between some Vue routes
  2. Go to another Liferay page
  3. History.back
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
thumbnail
Brendan Johan Lee, modified 5 Years ago. Junior Member Posts: 38 Join Date: 2/29/12 Recent Posts
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.
thumbnail
Marco Endres, modified 5 Years ago. Regular Member Posts: 112 Join Date: 8/22/12 Recent Posts
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.