基於條件開關案例的同一組件中的多個不同嵌套路由 - vue

Question

我正在實現一個播放器模塊。 在這里，初始頁面中有 3 個路由卡。 每張卡都路由到具有各自父卡的多個路由卡的下一頁。

例子

  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

現在，我已經創建了許多具有各自路線的組件。 但是，我想創建一個組件來根據條件路由所有不同的路由（$route.path）

現在，這是我的 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

        }
    ]
}

這是第一個主頁，然后是用於路由的 1 級后續卡組件

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>

1 級組件 (PlayersName) -> 2 級組件卡

    <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>

盒子控制代碼片段

    <template>
    <div class="box-wrapper">
        <div v-for="(items, i) in boxes" :key="'box-row-' + i" class="box-container">
            <vu-button-control
                v-for="item in items"
                :key="item.heading"
                plain
                class="box"
                :to="item.to"
                @click="click($event, item)"
            >
                <vu-row-control>
 <vu-column-control  cols="10">
                        <h1 class="label">{{ item.heading }}</h1>
                        <p class="body_content">{{ item.content }}</p>
                    </vu-column-control>

                    <vu-column-control cols="2">
                        <vu-button-control @click.stop=“addFavouriteClick(item)">
                        </vu-button-control>
                    </vu-column-control>
                </vu-row-control>
            </vu-button-control>
        </div>
    </div>
</template>

所有其他路由卡都遵循完全相同的結構，唯一不同的是傳遞的數據。 所以，這就是為什么我想要一個組件並基於 $route 路徑我想更改數據部分。

我正在考慮使用 switch case 方法，但無法執行條件路由部分。

Answer 1

抱歉，但我不確定我是否完全理解您的問題 - 但我嘗試為我理解的內容提供解決方案：

• 你有三個級別的路由
• 所有路線都有不同的組件
• 您想要 1 個組件來處理路線

為了實現這一點，我將擴展router以將subroutes道具傳遞給通用組件：

 const PlayersInfo = { template: ` <div>Players info component</div> ` } const PlayerStatistics = { template: ` <div>Player statistics component</div> ` } const PlayerRecords = { template: ` <div>Player records component</div> ` } const GroundsInfo = { template: ` <div>Grounds info component</div> ` } const MatchPlayed = { template: ` <div>Match played component</div> ` } const GroundsRecords = { template: ` <div>Grounds records component</div> ` } const MatchInfo = { template: ` <div>Match info component</div> ` } const MatchHistory = { template: ` <div>Match history component</div> ` } const CommunityResources = { template: ` <div>Community resources component</div> ` } // RoutingControl can be called inside itself const RoutingControl = { props: ["subroutes"], template: ` <div> <router-link v-for="subroute in subroutes":key="subroute":to="{ name: subroute }" class="link" > {{ subroute }} </router-link><br /> <router-view /> </div> ` } const routes = [{ name: 'Root', path: '/', redirect: { path: '/players/entry', }, }, { name: 'Players', path: '/players', component: RoutingControl, meta: { topNavigation: true }, redirect: { path: '/players/entry' }, props: (route) => ({ subroutes: getRouteNames("Players") }), children: [{ name: 'PlayersEntryPage', path: 'entry', component: RoutingControl, props: (route) => ({ subroutes: getRouteNames("PlayersEntryPage"), }), children: [{ name: 'PlayersName', path: 'name', component: RoutingControl, props: (route) => ({ subroutes: getRouteNames("PlayersName"), }), children: [{ name: 'Players info', path: 'players-info', component: PlayersInfo, }, { name: 'Player Statistics', path: 'player-statistics', component: PlayerStatistics, }, { name: 'Player records', path: 'player-records', component: PlayerRecords, }], }, { name: 'Grounds', path: 'grounds', component: RoutingControl, props: (route) => ({ subroutes: getRouteNames("Grounds"), }), children: [{ name: 'Grounds info', path: 'grounds-info', component: GroundsInfo, }, { name: 'Match played', path: 'match-played', component: MatchPlayed, }, { name: 'Grounds records', path: 'grounds-records', component: GroundsRecords, }], }, { name: 'MatchInformation', path: 'info', component: RoutingControl, props: (route) => ({ subroutes: getRouteNames("MatchInformation"), }), children: [{ name: 'Match info', path: 'match-info', component: MatchInfo, }, { name: 'match history', path: 'match-history', component: MatchHistory, }, { name: 'community resources', path: 'community-resources', component: CommunityResources, }], } ], }, ] } ] // get subroutes automatically for router (by route name) function getChildrenRoutesNames(arr) { return (routeName) => { let ret = [] arr.forEach(route => { if (route.name === routeName) { ret = route?.children.map(({ name }) => name) } else { if (route?.children?.length) { ret = [...ret, ...getChildrenRoutesNames(route.children)(routeName)] } } }) return ret } } // "fixing" the routes array scope, so it stays when used // inside that array const getRouteNames = getChildrenRoutesNames(routes) const router = new VueRouter({ routes, }) new Vue({ el: "#app", router, })

 .link { padding: 0 8px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <router-view /> </div>

我希望這接近你想要的:)