I am working on a Vue project where I have two pages a leadership page and a leaders page.
The leadership page is a list of leaders. The leaders' page is built to look like a popup with an "X" button to close out.
If you are on the leaders page and press the "X" it takes you back to the leadership page. However, if you refresh the leaders' page, and then press the "X" it does take you back to the leadership page but it is blank. If you refresh the leadership page, then it appears.
My first initial thought was that the page needed to be refreshed automatically. So I set up a localstorage key on the leaders page and then used this.$forceUpdate()
on the mounted hook on the leadership page. That did not work.
Since this is a Vue project I am trying to use $router
to control navigation, but I also thought that other forms of navigation such as windows.location.href
might work.
I failed to mention that this only happens when I run it on a server. So if I use the gridsome built in server by running gridsome dev
it works fine. However, if I build it locally with gridsome build
and then serve it using serve dist
is when it fails.
Since it is Gridsome it is a static generated site.
Here is some of the code from my project. This is the code from the second leaders window.
<b-button @click="closeNavigation()">
//<b-button @click="$router.push(
// {path:'/about/leaders-and-experts/'})" />
<script>
methods: {
closeNavigation (){
console.log(this.internal);
//if click is internal go back one page
if (this.internal){
localStorage.setItem('refresh',true);
this.$router.push({
path:'/about/leaders-and-experts/'});
} else {
//if click is external redirect to the leadership page
this.$router.go(-1);
}
}
}
And this is the leadership page
<script>
mounted (){
console.log('mount cardsTeam');
if (localStorage.getItem('refresh')){
this.$forceUpdate();
}
},
My idea was that if The page was refreshed then the leadership should refresh as well.