基于条件切换案例的同一组件中的多个不同嵌套路由 - 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

        }
    ]
}

这里是第一个主页，然后是用于路由的一级后续卡片组件

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>

一级组件（PlayersName）->二级组件卡

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

盒子控制代码sn-p

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

我希望这与您正在寻找的内容接近 :)