Vue router - API Data not fetching on redirect

Question

I'm building an application with JWT Login and i check if the user is logged in (when visit /) and then i redirect to Dashboard:

let routes = [
    { path: '', component: Login,
        beforeEnter(to, from, next) {
            if (auth.loggedIn()) {
                next({ path: '/dashboard' });
            } else {
                next();
            }
        }
    },
    { path: '/dashboard', component: Dashboard }
];

The Dashboard component is simple:

export default {
        created() {
            this.loadOrders();
        },
        methods: {
            loadOrders() {
               // Load Orders
            }
        },
        watch: {
            '$route': 'loadOrders'
        },
    }

If i Login, i will be redirected to /dashboard and the data is fetched.

If i'm on Dashboard (http://localhost:8080/dashboard) and i hit "refresh" on browser, this works too.

But, if i'm on this url http://localhost:8080/dashboard and i delete dashboard (so i just digit http://localhost:8080) the beforeEnter see that i'm authenticated and redirect me to /dashboard, but the data is not fetched (created, mounted etc are not called).

I think you should get rid of the this per-route navigation guard beforeEnter() and use the global one - router.beforeEach(), so It would be triggered on each navigation, but it would be on pending before all hooks has been resolved. — Belmin Bedak
After login, open a new tab, visit http://localhost:8080 and see if it works. If it's OK, then maybe your dashboard component is kept alive or reused, only the first visit will trigger created. — Leo

Nazgul Mamasheva Nazgul Mamasheva · Accepted Answer · 2017-01-22T11:37:35

Why there is no data section on your Dashboard component? If you use some data (ex: loading, error, post) on template, then you need to return them in data section. Try to add that section.

example:

<template>
  <div>
    <div v-if="loading">
      Loading...
    </div>

    <div v-if="!loading">
      {{ error }}
    </div>

    <div>
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

export default {
  data () {
    return {
      loading: false,
      error: null,
      post: null
    }
  },
  created () {
    this.fetchData()
  },
  watch: {
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.loading = true
       ...

      this.error = msg;
      this.post = post
    }
  }
};

Vue router - API Data not fetching on redirect

2 Answers