Skip to content

Commit d995cdb

Browse files
PanJiaChenPanJiaChen
authored
add[example]: add nested routes example (PanJiaChen#789)
1 parent cbc3ddd commit d995cdb

File tree

7 files changed

+61
-0
lines changed

7 files changed

+61
-0
lines changed

‎src/icons/svg/nested.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/lang/en.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ export default {
2828
lineChart: 'Line Chart',
2929
mixChart: 'Mix Chart',
3030
example: 'Example',
31+
nested: 'Nested Routes',
32+
bar: 'Bar',
33+
barProfile: 'Profile',
34+
barPosts: 'Posts',
3135
Table: 'Table',
3236
dynamicTable: 'Dynamic Table',
3337
dragTable: 'Drag Table',

‎src/lang/zh.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ export default {
2828
lineChart: '折线图',
2929
mixChart: '混合图表',
3030
example: '综合实例',
31+
nested: '路由嵌套',
32+
bar: 'Bar',
33+
barProfile: 'Profile',
34+
barPosts: 'Posts',
3135
Table: 'Table',
3236
dynamicTable: '动态Table',
3337
dragTable: '拖拽Table',

‎src/router/index.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,39 @@ export const asyncRouterMap = [
199199
]
200200
},
201201

202+
{
203+
path: '/nested',
204+
component: Layout,
205+
redirect: '/nested/bar/profile',
206+
name: 'nested',
207+
meta: {
208+
title: 'nested',
209+
icon: 'nested'
210+
},
211+
children: [
212+
{
213+
path: '/nested/bar', // Must write the full path
214+
component: () => import('@/views/nested/bar/index'), // Parent router-view
215+
name: 'bar',
216+
meta: { title: 'bar' },
217+
children: [
218+
{
219+
path: 'profile',
220+
component: () => import('@/views/nested/bar/profile'),
221+
name: 'bar-profile',
222+
meta: { title: 'barProfile' }
223+
},
224+
{
225+
path: 'posts',
226+
component: () => import('@/views/nested/bar/posts'),
227+
name: 'bar-posts',
228+
meta: { title: 'barPosts' }
229+
}
230+
]
231+
}
232+
]
233+
},
234+
202235
{
203236
path: '/error',
204237
component: Layout,

‎src/views/nested/bar/index.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div class="app-container">
3+
<code>Parent View: Bar</code>
4+
<img src="https://wpimg.wallstcn.com/be29a7d2-5ccf-4a2b-888d-8a6c2bbb7aac.png">
5+
<router-view></router-view>
6+
</div>
7+
</template>

‎src/views/nested/bar/posts.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<div style="margin-top:30px;">
3+
<el-alert title="Children: Posts" type="warning" :closable="false">
4+
</el-alert>
5+
</div>
6+
</template>

‎src/views/nested/bar/profile.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<div style="margin-top:30px;">
3+
<el-alert title="Children: Profile" type="success" :closable="false">
4+
</el-alert>
5+
</div>
6+
</template>

0 commit comments

Comments
 (0)