I am implementing a players module. In here , there are 3 routing cards in initial page. Each card is routing to next page which is having multiple routing cards of their respective parent card.

Example

  1.  1st level Card( Player Name) -- > 2nd level Cards(Players info, Player Statistics, Records) --> upto 3rd level routing

  2.  1st level Card(Grounds) -- > 2nd level Cards(Grounds info, Match played, Records) --> upto 3rd level routing

  3.  1st level Card(Match Information) -- > 2nd level Cards(Match info, match history, community resources) --> upto 3rd level routing

Now, i have created that many components with respective routes. But, i want to create one component to route all different routes based on condition( $route.path)

Now, here is my routes.js

{
    name: 'Players',
    path: '/players',
    component: PageLayout,
    meta: {
        topNavigation: true
    },
    redirect: { path: '/players/entry' },
    children: [
        {
            name: 'PlayersEntryPage',
            path: 'entry',
            component: PlayersEntryPage
        },
        {
            name: 'PlayersName',
            path: 'name',
            component: PlayersName
        },
        {
            name: 'Grounds',
            path: 'grounds',
            component: Grounds
        },
        {
            name: 'MatchInformation',
            path: 'info',
            component: MatchInformation

        }
    ]
}

Here is the first home page and then 1st level subsequent card components for routing

PlayersEntryPage

    <template>
    <vu-page background="gray">
        <vu-container>
            <vu-row-control class="mt-3">
                 <vu-box-control :list="cardLists" @click="cardAction"></vu-box-control>
            </vu-row-control>
        </vu-container>
    </vu-page>
</template>

<script>
export default {
    data() {
        return {
            cardLists: [
                { heading: ‘PlName', content:’Players Name and information',to:'/players/name'},
                { heading: ‘Grnd',  content:  ‘Ground Information', to:'/players/grounds' },
                { heading: ‘Infos', content:  ‘Match Informations', to:'/players/info' }
            ]
        };
    },
    methods: {
        cardAction(value) {
            if(value) {
                this.$router.push(value.to);
            }
        }
    }
};
</script>

1st level component (PlayersName) -> 2nd level component cards

    <template>
    <vu-page background="gray">
        <vu-container>
            <vu-row-control class="mt-3">
                 <vu-box-control :list="cardLists" @click="cardAction"></vu-box-control>
            </vu-row-control>
        </vu-container>
    </vu-page>
</template>

<script>
export default {
    data() {
        return {
            cardLists: [
                { heading: ‘Players Personal Info', to:’/players/name/pinfo'},
                { heading: ‘Players Statistics', to:'/players/name/statistics' },
                { heading: ‘Players Records',to:’/players/name/records' }
            ]
        };
    },
    methods: {
        cardAction(value) {
            if(value) {
                this.$router.push(value.to);
            }
        }
    }
};
</script>

All other routing cards are following exactly same structure just one difference is the passed data. So, that’s why i want one single component and based on $route path i want to change the data part.

I am thinking to use switch case approach but not able to do that conditional routing part.

Source: Ask Javascript Questions