Question

我正在设置一个vuejs应用程序，该应用程序应该路由到一些预定义的页面。除了“ complete”和“ allCompleted”以外，所有路线都工作完美。

所有任务完成后，应将用户重定向到allCompleted路线。

实际结果是什么

用户完成任务后，该应用将重定向到“完成”。但这会呈现allCompleted组件。

所有任务完成后，我们将重定向到“ allCompleted”。

所以我不知道我在做什么错。

我们认为我们已经阅读了互联网上有关vue-router并渲染错误组件的每篇文章，其中大部分是关于错字或在子路由器视图中渲染子级的。但这不是我们的应用程序。

router.ts

import Vue from "vue";
import Router from "vue-router";
import { QuestsView, QuestCompleteView } from "@/modules/quests";
import QuestDetailView from "../modules/quests/views/QuestDetailView.vue";
import QuestAllCompletedView from "../modules/quests/views/QuestAllCompletedView.vue";

import Register from "../modules/auth/components/Register.vue";
import Login from "../modules/auth/components/Login.vue";
import PasswordForgotten from "../modules/auth/components/PasswordForgotten.vue";
import ContactsView from "../modules/contacts/views/ContactsView.vue";
import authGuard from "./auth-guard";
import LeaderBoardView from "@/modules/leaderboard/views/LeaderBoardView.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "*",
      redirect: "/quests"
    },
    {
      path: "/register",
      name: "register",
      component: Register
    },
    {
      path: "/login",
      name: "login",
      component: Login
    },
    {
      path: "/passwordForgotten",
      name: "passwordForgotten",
      component: PasswordForgotten
    },
    {
      path: "/quests",
      name: "quests",
      component: QuestsView,
      beforeEnter: authGuard
    },
    {
      path: "/quests/:id",
      name: "quest detail",
      component: QuestDetailView,
      beforeEnter: authGuard
    },
    {
      path: "/contacts",
      name: "contacts",
      component: ContactsView,
      beforeEnter: authGuard
    },
    {
      path: "/info",
      name: "info",
      beforeEnter: authGuard
    },
    {
      path: "/leaderboard",
      name: "leaderboard",
      component: LeaderBoardView,
      beforeEnter: authGuard
    },
    {
      path: "/complete",
      name: "complete",
      component: QuestCompleteView,
    },
    {
      path: "/allCompleted",
      name: "allCompleted",
      component: QuestAllCompletedView
    }
  ]
});

QuestList.vue

export default class Quests extends Vue {
  @QuestsGetter quests: Quest[];
  @QuestsGetter loading: boolean;
  @QuestsAction loadQuests;

  @Watch("quests")
  onQuestsChange(value: Quest[]): void {
    const completedQuests = value.filter(
      quest => quest.status === QuestStatus.COMPLETED
    );
    if (completedQuests.length === this.quests.length) {
      this.$router.push("/allCompleted"); // Todo: Create allCompleted view
    }
  }

  created() {
    this.loadQuests();
  }
}
</script>

QuestAllCompletedView.vue

<template>
  <div class="quest-all-complete-view">
    <router-link to="quests">
      <div class="all-reward all-reward--image"></div>
    </router-link>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-property-decorator";

export default class QuestAllCompletedView extends Vue {}
</script>

<style scoped lang="scss">
@import "~@/styles/variables";
.quest-all-complete-view {
  width: 100%;

  .all-reward {
    width: auto;
    height: 56rem;

    &--image {
      background: url("~@/assets/images/reward-starburst-final.png") center
        center / contain no-repeat;
    }
  }

  .back-to-overview {
    height: 4rem;
    display: block;
    margin: -140px auto 0 auto;

    &--image {
      background: url("~@/assets/images/backtooverview.png") center center /
        contain no-repeat;
    }
  }
}
</style>

QuestCompleteView.vue

<template>
  <div class="quest-complete-view">
    <div class="reward reward--image"></div>

    <router-link to="quests">
      <div class="back-to-overview back-to-overview--image"></div>
    </router-link>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-property-decorator";

export default class QuestComplete extends Vue {}
</script>

<style scoped lang="scss">
@import "~@/styles/variables";
.quest-complete-view {
  width: 100%;

  .reward {
    width: auto;
    height: 56rem;

    &--image {
      background: url("~@/assets/images/reward.png") center center / contain
        no-repeat;
    }
  }

  .back-to-overview {
    height: 4rem;
    display: block;
    margin: -140px auto 0 auto;

    &--image {
      background: url("~@/assets/images/backtooverview.png") center center /
        contain no-repeat;
    }
  }
}
</style>

Auth-guard

import store from "@/store/index";

export default (to: any, from: any, next: any) => {
  if (store.state.auth.user) {
    next();
  } else {
    next("/login");
  }
};

QuestDetailView.vue中部分代码的一部分，路由到/ complete

public handleButtonClick(): void {
    if (this.quest.status === QuestStatus.UNCOMPLETED) {
      this.startQuest(this.quest.id).then(() => this.$router.push("/quests"));
    } else if (this.quest.status === QuestStatus.IN_PROGRESS) {
      this.stopQuest(this.quest.id).then(() => this.$router.push("/complete"));
    }
}

所以我们想要的是：当我们路由到/ complete路由时，它将呈现Questcomplete组件，即“ QuestCompleteView”

当我们执行render.push（“ / allCompleted”）时，我们将使用具有正确组件（即QuestAllCompletedView）的allCompleted路线

如何修复Vue-Router在正确的路线上呈现错误的组件

0 个答案: