From d995cdb33233efaac79ff02881cfe2081d96d666 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Thu, 21 Jun 2018 14:26:25 +0800
Subject: [PATCH] add[example]: add nested routes example (#789)

---
 src/icons/svg/nested.svg         |  1 +
 src/lang/en.js                   |  4 ++++
 src/lang/zh.js                   |  4 ++++
 src/router/index.js              | 33 ++++++++++++++++++++++++++++++++
 src/views/nested/bar/index.vue   |  7 +++++++
 src/views/nested/bar/posts.vue   |  6 ++++++
 src/views/nested/bar/profile.vue |  6 ++++++
 7 files changed, 61 insertions(+)
 create mode 100644 src/icons/svg/nested.svg
 create mode 100644 src/views/nested/bar/index.vue
 create mode 100644 src/views/nested/bar/posts.vue
 create mode 100644 src/views/nested/bar/profile.vue

diff --git a/src/icons/svg/nested.svg b/src/icons/svg/nested.svg
new file mode 100644
index 00000000..f5641979
--- /dev/null
+++ b/src/icons/svg/nested.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1529559567446" class="icon" style="" viewBox="0 0 1167 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1767" xmlns:xlink="http://www.w3.org/1999/xlink" width="227.9296875" height="200"><defs><style type="text/css"></style></defs><path d="M0.015952 74.459413A2.286 2.286 1440 1 0 145.85218 74.459413 2.286 2.286 1440 1 0 0.015952 74.459413zM291.720312 1.525347 1166.801488 1.525347 1166.801488 147.361574 291.720312 147.361574zM291.720312 366.163773A2.286 2.286 1440 1 0 437.55654 366.163773 2.286 2.286 1440 1 0 291.720312 366.163773zM583.424672 293.229707 1166.801488 293.229707 1166.801488 439.065934 583.424672 439.065934zM291.720312 949.540588A2.286 2.286 1440 1 0 437.55654 949.540588 2.286 2.286 1440 1 0 291.720312 949.540588zM583.424672 876.638427 1166.801488 876.638427 1166.801488 1022.474654 583.424672 1022.474654zM583.424672 657.836228A2.286 2.286 1440 1 0 729.2609 657.836228 2.286 2.286 1440 1 0 583.424672 657.836228zM875.129032 584.934067 1166.801488 584.934067 1166.801488 730.770294 875.129032 730.770294z" p-id="1768"></path></svg>
\ No newline at end of file
diff --git a/src/lang/en.js b/src/lang/en.js
index a7b1fa00..eed6fdd3 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -28,6 +28,10 @@ export default {
     lineChart: 'Line Chart',
     mixChart: 'Mix Chart',
     example: 'Example',
+    nested: 'Nested Routes',
+    bar: 'Bar',
+    barProfile: 'Profile',
+    barPosts: 'Posts',
     Table: 'Table',
     dynamicTable: 'Dynamic Table',
     dragTable: 'Drag Table',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 2b081331..0c16dee8 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -28,6 +28,10 @@ export default {
     lineChart: '折线图',
     mixChart: '混合图表',
     example: '综合实例',
+    nested: '路由嵌套',
+    bar: 'Bar',
+    barProfile: 'Profile',
+    barPosts: 'Posts',
     Table: 'Table',
     dynamicTable: '动态Table',
     dragTable: '拖拽Table',
diff --git a/src/router/index.js b/src/router/index.js
index cf3020cb..2c9dbcbd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -199,6 +199,39 @@ export const asyncRouterMap = [
     ]
   },
 
+  {
+    path: '/nested',
+    component: Layout,
+    redirect: '/nested/bar/profile',
+    name: 'nested',
+    meta: {
+      title: 'nested',
+      icon: 'nested'
+    },
+    children: [
+      {
+        path: '/nested/bar', // Must write the full path
+        component: () => import('@/views/nested/bar/index'), // Parent router-view
+        name: 'bar',
+        meta: { title: 'bar' },
+        children: [
+          {
+            path: 'profile',
+            component: () => import('@/views/nested/bar/profile'),
+            name: 'bar-profile',
+            meta: { title: 'barProfile' }
+          },
+          {
+            path: 'posts',
+            component: () => import('@/views/nested/bar/posts'),
+            name: 'bar-posts',
+            meta: { title: 'barPosts' }
+          }
+        ]
+      }
+    ]
+  },
+
   {
     path: '/error',
     component: Layout,
diff --git a/src/views/nested/bar/index.vue b/src/views/nested/bar/index.vue
new file mode 100644
index 00000000..020a85c9
--- /dev/null
+++ b/src/views/nested/bar/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="app-container">
+    <code>Parent View: Bar</code>
+    <img src="https://wpimg.wallstcn.com/be29a7d2-5ccf-4a2b-888d-8a6c2bbb7aac.png">
+    <router-view></router-view>
+  </div>
+</template>
diff --git a/src/views/nested/bar/posts.vue b/src/views/nested/bar/posts.vue
new file mode 100644
index 00000000..be3ca256
--- /dev/null
+++ b/src/views/nested/bar/posts.vue
@@ -0,0 +1,6 @@
+<template>
+  <div style="margin-top:30px;">
+    <el-alert title="Children: Posts" type="warning" :closable="false">
+    </el-alert>
+  </div>
+</template>
diff --git a/src/views/nested/bar/profile.vue b/src/views/nested/bar/profile.vue
new file mode 100644
index 00000000..fe444cb1
--- /dev/null
+++ b/src/views/nested/bar/profile.vue
@@ -0,0 +1,6 @@
+<template>
+  <div style="margin-top:30px;">
+    <el-alert title="Children: Profile" type="success" :closable="false">
+    </el-alert>
+  </div>
+</template>