Customized Router

• MyRouter.vue
  • the target component was set by the prop from the app.vue

<!-- Router.vue -->
<template>
  <component :is="routedComponent"></component>
</template>

<script>
import ProfilePage from "../views/ProfilePage";
import EducationPage from "../views/EducationPage";

const routes = {
  "#": ProfilePage,
  "#education": EducationPage,
};

export default {
  data() {
    return { current: window.location.hash };
  },
  props: ["page"],
  computed: {
    routedComponent() {
      // alert(this.current + this.page);
      return routes[this.current + this.page];
    },
  },
  render(createElement) {
    return createElement(this.routedComponent);
  },
};
</script>

• Application.vue
  • pass the tab target into prop called page and set into <app-router :page="page"></app-router>

<template>
  <div>
    <ul class="nav nav-tabs">
      <li class="nav-item" role="presentation">
        <a
          class="nav-link active"
          data-bs-toggle="tab"
          aria-current="page"
          href="#"
          @click="toggleModal('#')"
          >{{ $t("message.Profile") }}</a
        >
      </li>
      <li class="nav-item" role="presentation">
        <a
          class="nav-link"
          data-bs-toggle="tab"
          aria-current="page"
          href="#education"
          @click="toggleModal('#education')"
          >{{ $t("message.Education") }}</a
        >
      </li>
      <li class="nav-item" role="presentation">
        <a
          class="nav-link"
          data-bs-toggle="tab"
          aria-current="page"
          href="#experience"
          @click="toggleModal('#experience')"
          >{{ $t("message.MyCV") }}</a
        >
      </li>
    </ul>
    <app-router :page="page"></app-router>
  </div>
</template>
<script>
import AppRouter from "../router/ProfileRouter";
export default {
  components: {
    AppRouter,
  },
  data() {
    return {
      page: "#",
    };
  },
  methods: {
    toggleModal(hash) {
      this.page = hash;
    },
  },
};
</script>
<style scoped>
.modal-header {
  background-color: #cae4ba;
}
.nav-link {
  background-color: #cae4ba !important;
  cursor: pointer;
  border-top: 1px solid white !important;
  border-right: 1px solid white !important;
  border-left: 1px solid white !important;
}
.active {
  background-color: white !important;
  border-top: 1px solid black !important;
  border-right: 1px solid black !important;
  border-left: 1px solid black !important;
}
</style>