Vue路由器-重定向时未获取API数据答案

【问题标题】：Vue router - API Data not fetching on redirectVue路由器-重定向时未获取API数据
【发布时间】：2017-06-06 11:15:32
【问题描述】：

我正在使用 JWT Login 构建一个应用程序，并检查用户是否已登录（访问 / 时），然后我重定向到 Dashboard：

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，但是 未获取数据（未调用created、mounted 等）。

【问题讨论】：

我认为你应该摆脱这个 per-route 导航守卫beforeEnter() 并使用全局的 - router.beforeEach()，所以它会在每次导航时触发，但它会处于挂起状态在解决所有钩子之前。
登录后，打开一个新标签，访问http://localhost:8080，看看是否有效。如果没问题，那么可能你的dashboard组件是保活或者复用的，只有第一次访问会触发created。

标签： vue.js vue-router

【解决方案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
    }
  }
};

【讨论】：

【解决方案2】：

当对 API 执行任何操作时，服务器会以相关状态进行响应。所以当你删除产品时，你必须忽略服务器的响应，然后将新路径推送到 Vue 路由器。

【讨论】：