On initial page, I get 2 ID variables: organizationId and brandId, that I want to save in my URL as params, while routing to Organization Overview Page.
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>
It works properly, on the new page I can see both variables in URL and in Vue DevTools:
The problem is that when I refresh the page, I got a blank screen.
The interesting thing is that when I include only 'organizationId' variable in the router path, it works properly.
{
path: 'organization/:organizationId/overview',
name: 'OrganizationOverviewPage',
component: OrganizationOverviewPage,
},
This is also how it looked like earlier, but due to the needs of the second variable - brandId, I had to add it - now it does not work. The URL seems to hit the route because only when I break it, I got 404. Could this be related to the generated component? I have no idea how to find a solution, I did not even get any errors from the terminal or browser console.
Update - 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>
OrganizationOverviewPage– Anatolynpm run serve) or something else? – Phil