Вью маршрутизатор - Данные API не выборки на редирект

Question

Я строю приложение с JWT Логин и я проверить, если пользователь вошел в систему (при посещении /), а затем я перенаправлять на панели управления:

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

Dashboard компонент прост:

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

Если я Вход, я буду перенаправлен/приборной панели и данные считываются.

Если я на панели инструментов (http://localhost:8080/dashboard), и я ударил «обновить» в браузере, это тоже работает.

Но, если я нахожусь на этом адресе http://localhost:8080/dashboard и я удалить панель (так что я просто цифры http://localhost:8080) beforeEnter видеть, что я буду заверен и перенаправить меня к/приборной панели, но данных не извлекаются (created , mounted и т. Д. Не называются).

Answer 1

Почему нет раздела данных на вашем компоненте панели мониторинга? Если вы используете некоторые данные (например, загрузка, ошибка, сообщение) в шаблоне, вам необходимо вернуть их в разделе данных. Попытайтесь добавить этот раздел.

пример:

<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 
    } 
    } 
};