Question

我正在使用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），我在浏览器上点击“刷新”，这也有效。

但是，如果我在此网址http://localhost:8080/dashboard并且我删除了信息中心（因此我只是数字http://localhost:8080），beforeEnter会看到我已通过身份验证并将我重定向到/信息中心，但未提取数据（created，mounted等未被调用。

Answer 1

为什么您的仪表板组件上没有数据部分？如果您在模板上使用某些数据（例如：loading，error，post），则需要在数据部分中返回它们。尝试添加该部分。

示例：

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

Answer 2

对API采取任何操作时，服务器将以相关状态进行响应。因此，在删除产品时，您必须忽略服务器的响应，然后将新路径推送到Vue路由器。

Vue路由器 - API数据未在重定向上获取

2 个答案: