Vue.js Vue路由器-重定向时未获取API数据

我正在使用JWT登录构建一个应用程序，我检查用户是否在访问/时登录，然后重定向到仪表板：

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

仪表板组件很简单：

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

如果我登录，我将被重定向到/dashboard并获取数据

如果我在仪表板上http://localhost:8080/dashboard 我在浏览器上点击了“刷新”，这也很有效

---

但是，如果我在这个url上http://localhost:8080/dashboard 我删除了仪表板，所以我只需要数字http://localhost:8080 beforeEnter可以看到我已通过身份验证，并将我重定向到/dashboard，但数据未被提取、创建、装载等，因此不会被调用。

为什么仪表板组件上没有数据部分？若您使用一些数据，例如：加载、错误、在模板上发布，那个么您需要在数据部分返回它们。尝试添加该部分

例如：

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

---

当对API采取任何操作时，服务器会以相关状态响应。

---

所以，当您删除产品时，您必须忽略服务器的响应，然后将新路径推送到Vue路由器。

我认为您应该在进入并使用全局one-router.beforeach之前取消此每路由导航保护，这样每次导航时都会触发它，但在解决所有挂钩之前，它将处于挂起状态http://localhost:8080 看看它是否有效。如果没有问题，那么您的仪表板组件可能会保持活动状态或重复使用，只有第一次访问才会触发创建。