Javascript 基于条件切换case-vue的同一组件中的多个不同嵌套路由
我正在实现一个players模块。在这里，第一页有3张路由卡。每一张卡都被路由到下一页，下一页有各自父卡的多张路由卡 示例Javascript 基于条件切换case-vue的同一组件中的多个不同嵌套路由,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我正在实现一个players模块。在这里，第一页有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(Gr
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
<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>
{
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. 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
<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>
导出默认值{
数据（）{
返回{
卡片列表：[
{标题：'PlName'，内容：'Players Name and information'，收件人：'/Players/Name'}，
{标题：'Grnd'，内容：'Ground Information'，收件人：'/players/grounds'}，
{标题：'Infos'，内容：'Match Informations'，收件人：'/players/info'}
]
};
},
方法：{
信用卡行动（价值）{
如果（值）{
这是$router.push（value.to）；
}
}
}
};
<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>
导出默认值{
数据（）{
返回{
卡片列表：[
{标题：'玩家个人信息'，收件人：'/Players/name/pinfo'}，
{标题：'Players Statistics'，至：'/Players/name/Statistics'}，
{标题：'Players Records'，至：'/Players/name/Records'}
]
};
},
方法：{
信用卡行动（价值）{
如果（值）{
这是$router.push（value.to）；
}
}
}
};
<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>
{{item.heading}}
{{item.content}
对不起，我不确定我是否完全理解了您的问题，但我试图为我理解的问题提供一个解决方案：
- 您有三个级别的路由
- 所有管线都有不同的组件
- 您希望有一个组件来处理路由
为了实现这一点，我将扩展路由器
，将子例程
道具传递给通用组件：
const PlayersInfo={
模板：`
玩家信息组件
`
}
康斯特球员统计={
模板：`
播放器统计组件
`
}
常量PlayerRecords={
模板：`
播放器记录组件
`
}
const GroundsInfo={
模板：`
地面信息组件
`
}
常数={
模板：`
匹配播放的组件
`
}
常数地面记录={
模板：`
地面记录部分
`
}
常量匹配信息={
模板：`
匹配信息组件
`
}
常数匹配历史={
模板：`
匹配历史组件
`
}
常量社区资源={
模板：`
社区资源部分
`
}
//RoutingControl可以在其内部调用
常数路由控制={
道具：[“子例程”]，
模板：`
{{子例程}}
`
}
常数路由=[{
名称：'根'，
路径：“/”，
重定向：{
路径：'/players/entry'，
},
},
{
姓名：'玩家'，
路径：'/players'，
组成部分：路由控制，
元：{
topNavigation：正确
},
重定向：{
路径：'/players/entry'
},
道具：（路线）=>({
子例程：GetRouteName（“玩家”）
}),
儿童：[{
名称：“PlayerEntryPage”，
路径：“条目”，
组成部分：路由控制，
道具：（路线）=>({
子例程：GetRouteName（“PlayerEntryPage”），
}),
儿童：[{
名称：'PlayerName'，
路径：“名称”，
组成部分：路由控制，
道具：（路线）=>({
子例程：GetRouteName（“PlayerName”），
}),
儿童：[{
姓名：'玩家信息'，
路径：'玩家信息'，
组件：PlayerInfo，
}, {
名称：'玩家统计'，
路径：'玩家统计'，
组成部分：球员统计，
}, {
名称：'玩家记录'，
路径：'玩家记录'，
组件：PlayerRecords，
}],
},
{
名称：'Grounds'，
路径：'地面'，
组成部分：路由控制，
道具：（路线）=>({
子例程：GetRouteName（“接地”），
}),
儿童：[{
名称：'Grounds info'，
路径：“地面信息”，
组成部分：GroundsInfo，
}, {
姓名：'比赛进行'，
路径：“比赛进行中”，
组成部分：比赛，
}, {
名称：'Grounds records'，
路径：'grounds records'，
组成部分：地面记录，
}],
},
{
名称：“匹配信息”，
路径：“信息”，
组成部分：路由控制，
道具：（路线）=>({
子例程：GetRouteName（“匹配信息”），
}),
儿童：[{
名称：'匹配信息'，
路径：“匹配信息”，
组件：MatchInfo，
}, {
名称：“匹配历史记录”，
路径：“匹配历史记录”，
组成部分：匹配历史，
}, {
名称：'社区资源'，
路径：“社区资源”，
组成部分：社区资源，
}],
}
],
}, ]
}
]
//自动获取路由器的子例程（按路由名称）
函数getChildr