Блог

На начальной странице я получаю 2 переменные идентификатора: organizationId и brandId, которые я хочу сохранить в своем URL в качестве параметров при маршрутизации на страницу обзора организации.

 export const router = new Router({
  mode: 'history',
  routes: [
    ...
    {
      path: 'organization/:organizationId/brand/:brandId/overview',
      name: 'OrganizationOverviewPage',
      component: OrganizationOverviewPage,
    },
    ...
  ]
});
  

 <router-link :to="{ name: 'OrganizationOverviewPage', 
                    params: { organizationId: owner.id, brandId: brand.id }}">
    BUTTON
</router-link>
  

Он работает правильно, на новой странице я вижу обе переменные в URL и в Vue DevTools:

Проблема в том, что когда я обновляю страницу, я получаю пустой экран.

Интересно то, что когда я включаю только переменную ‘organizationId’ в путь к маршрутизатору, она работает правильно.

 {
  path: 'organization/:organizationId/overview',
  name: 'OrganizationOverviewPage',
  component: OrganizationOverviewPage,
},
  

Так же это выглядело раньше, но из-за потребностей второй переменной — brandId мне пришлось добавить ее — теперь она не работает.
URL-адрес, похоже, попадает в маршрут, потому что только когда я его нарушаю, я получаю 404. Может ли это быть связано с сгенерированным компонентом?
Я понятия не имею, как найти решение, я даже не получал никаких ошибок от терминала или консоли браузера.

Обновление — OrganizationOverviewPage:

 <template>
  <div>
    <v-row no-gutters class="mb-3">
      <v-col cols="12">
        <v-card flat>
          <v-card-title>
            <h5 class="float-left m-0">
              <router-link
                :to="{ name: 'OrganizationOverviewPage'}"
                class="main-options-router-link"
              >
                <span class="font-weight-bold text-dark">Overview</span>
              </router-link>
              <span class="px-1">|</span>
              <router-link
                class="main-options-router-link"
                :to="{ name:'OrganizationArtists'}"
              >Artists</router-link>
              <span class="px-1">|</span>
              <router-link class="main-options-router-link" :to="{ name: 'OrganizationBrands'}">Brands</router-link>
              <span class="px-1">|</span>
              <router-link class="main-options-router-link" :to="{ name: 'OrganizationTeam'}">Team</router-link>
              <span class="px-1">|</span>
              <router-link
                class="main-options-router-link"
                :to="{ name: 'OrganizationTemplates'}"
              >Templates</router-link>
            </h5>
          </v-card-title>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col md="6">
        <OrganizationProfileWidget></OrganizationProfileWidget>
      </v-col>
      <v-col md="6">
        <OrganizationMetricsWidget v-bind:organizationId="organizationId"></OrganizationMetricsWidget>
      </v-col>
    </v-row>
    <v-row no-gutters class="mt-3">
      <v-col cols="12">
        <Widget
          title="<h4><span class='font-weight-bold'>Active Campaigns</span></h4>"
          customHeader
          settings
          :name="`Organization Overview`"
        >
          <div slot="body">
            <v-row>
              <v-col class="mt-4 mb-2">
                <v-text-field
                  outlined
                  v-model="search"
                  dense
                  placeholder="Search user by Name"
                  hide-details
                ></v-text-field>
              </v-col>
            </v-row>
            <v-data-table
              :headers="headers"
              :items="list"
              item-key="id"
              :search="search"
              class="elevation-1 list-data-table"
              :loading="inProgress"
              hide-default-footer
              :page.sync="page"
              :items-per-page="itemsPerPage"
              @page-count="pageCount = $event"
            >
              <template v-slot:item.artistName="{ item }">
                <router-link
                  :to="{ name:'ArtistOpsPage',params: { organizationId: organizationId,artistId:item.artistId }}"
                >{{item.artistName}}</router-link>
              </template>
              <template v-slot:item.title="{ item }">
                <router-link
                  :to="{ name:'ArtistOpsPage',params: { organizationId: organizationId,artistId:item.artistId }}"
                >{{item.title}}</router-link>
              </template>
              <template v-slot:item.startDt="{ item }">{{item.startDt | DayMonthYear}}</template>
              <template v-slot:item.endDt="{ item }">{{item.endDt | DayMonthYear}}</template>
              <template v-slot:footer>
                <v-divider></v-divider>
                <v-row align="center">
                  <v-col cols="2" class="px-4">
                    <v-select
                      :value="itemsPerPage"
                      :items="perPageRecordsOptions"
                      label="Items per page"
                      @change="itemsPerPage = parseInt($event, 10)"
                    ></v-select>
                  </v-col>
                  <v-spacer></v-spacer>
                  <v-col cols="8" class="px-4">
                    <v-pagination v-model="page" :length="pageCount"></v-pagination>
                  </v-col>
                  <v-spacer></v-spacer>
                </v-row>
              </template>
            </v-data-table>
          </div>
        </Widget>
      </v-col>
    </v-row>
  </div>
</template>
  

 <script>
import Widget from "@/components/venus/Widget";
import { createHelpers } from "vuex-map-fields";
import OrganizationProfileWidget from "@/components/venuspro/agent/suitcase/OrganizationProfileWidget";
import OrganizationMetricsWidget from "@/components/venuspro/agent/suitcase/OrganizationMetricsWidget";

const { mapFields } = createHelpers({
  getterType: "organizationOne/getField",
  mutationType: "organizationOne/updateField"
});

export default {
  name: "OrganizationOverviewPage",
  components: {
    OrganizationProfileWidget,
    OrganizationMetricsWidget,
    Widget
  },
  computed: {
    organizationId: function() {
      return this.$route.params.organizationId;
    },
    brandId: function() {
      return this.$route.params.brandId;
    },
    list: function() {
      return this.$store.state.campaignList.allList;
    },
    organizationOne: function() {
      return this.$store.state.organizationOne.one;
    },
    ...mapFields(["one", "inProgress"])
  },

  data() {
    return {
      search:"",
      page: 1,
      itemsPerPage: 10,
      perPageRecordsOptions: [5, 10, 50, 100, 500],
      headers: [
        {
          text: "Artist",
          align: "center",
          sortable: false,
          value: "artistName"
        },
        {
          text: "Title",
          align: "center",
          sortable: true,
          filterable: true,
          value: "title"
        },
        {
          text: "Start Date",
          align: "center",
          sortable: true,
          filterable: true,
          value: "startDt"
        },
        {
          text: "End Date",
          align: "center",
          sortable: true,
          filterable: true,
          value: "endDt"
        }
      ]
    };
  },
  created() {
    if (this.organizationOne.id !== this.organizationId)
      this.$store.dispatch("organizationOne/fetchOne", this.organizationId);
    this.$store.dispatch(
      "campaignList/fetchAllCampaignList",
      this.organizationId
    );
  },
  methods: {}
};
</script>
  

Кто-то ответил на этот вопрос с подсказкой, но затем удалил свой ответ. В любом случае, спасибо, это было решение!

По-моему vue.config.js , мне нужно было исправить конфигурацию в моем devServer объекте.

 module.exports = {
    ...
    devServer: {
        ...
        historyApiFallback: {
          rewrites: [
             ...
            //  { from: //brand/, to: '/brand.html' },
          ]
        }
      },
}
  

Я закомментировал строку с brand перезаписью, и теперь она работает!