Vue pages do not appear after a refresh

49 views Asked by At

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.

0

There are 0 answers