From 8ccd85bc85094e3597d1d621be79749591a56f15 Mon Sep 17 00:00:00 2001
From: midfar <midfar@qq.com>
Date: Mon, 13 Mar 2023 15:27:29 +0800
Subject: [PATCH] added nested

---
 src/router/index.ts                              |  4 ++--
 src/router/modules/{nested.js => nested.ts}      | 16 ++++++++--------
 src/views/nested/menu1/index.vue                 |  7 +++++++
 src/views/nested/menu1/menu1-1/index.vue         |  7 +++++++
 src/views/nested/menu1/menu1-2/index.vue         |  7 +++++++
 .../nested/menu1/menu1-2/menu1-2-1/index.vue     |  5 +++++
 .../nested/menu1/menu1-2/menu1-2-2/index.vue     |  5 +++++
 src/views/nested/menu1/menu1-3/index.vue         |  5 +++++
 src/views/nested/menu2/index.vue                 |  5 +++++
 src/views/pdf/content.js                         |  2 +-
 10 files changed, 52 insertions(+), 11 deletions(-)
 rename src/router/modules/{nested.js => nested.ts} (73%)
 create mode 100644 src/views/nested/menu1/index.vue
 create mode 100644 src/views/nested/menu1/menu1-1/index.vue
 create mode 100644 src/views/nested/menu1/menu1-2/index.vue
 create mode 100644 src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
 create mode 100644 src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
 create mode 100644 src/views/nested/menu1/menu1-3/index.vue
 create mode 100644 src/views/nested/menu2/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 98e5ec9..b9fd44d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,7 +7,7 @@ const Layout = ():RouteComponent => import('@/layout/index.vue');
 /* Router Modules */
 // import componentsRouter from './modules/components';
 import chartsRouter from './modules/charts';
-// import nestedRouter from './modules/nested';
+import nestedRouter from './modules/nested';
 import tableRouter from './modules/table';
 
 /**
@@ -168,7 +168,7 @@ export const asyncRoutes:RouteRecordRaw[] = [
   // /** when your routing map is too long, you can split it into small modules **/
   // componentsRouter,
   chartsRouter,
-  // nestedRouter,
+  nestedRouter,
   tableRouter,
 
   // {
diff --git a/src/router/modules/nested.js b/src/router/modules/nested.ts
similarity index 73%
rename from src/router/modules/nested.js
rename to src/router/modules/nested.ts
index 56397dc..b4cabdd 100644
--- a/src/router/modules/nested.js
+++ b/src/router/modules/nested.ts
@@ -1,6 +1,6 @@
 /** When your routing table is too long, you can split it into small modules **/
 
-const Layout = () => import('@/layout');
+const Layout = () => import('@/layout/index.vue');
 
 const nestedRouter = {
   path: '/nested',
@@ -14,33 +14,33 @@ const nestedRouter = {
   children: [
     {
       path: 'menu1',
-      component: () => import('@/views/nested/menu1/index'), // Parent router-view
+      component: () => import('@/views/nested/menu1/index.vue'), // Parent router-view
       name: 'Menu1',
       meta: { title: 'Menu 1' },
       redirect: '/nested/menu1/menu1-1',
       children: [
         {
           path: 'menu1-1',
-          component: () => import('@/views/nested/menu1/menu1-1'),
+          component: () => import('@/views/nested/menu1/menu1-1/index.vue'),
           name: 'Menu1-1',
           meta: { title: 'Menu 1-1' }
         },
         {
           path: 'menu1-2',
-          component: () => import('@/views/nested/menu1/menu1-2'),
+          component: () => import('@/views/nested/menu1/menu1-2/index.vue'),
           name: 'Menu1-2',
           redirect: '/nested/menu1/menu1-2/menu1-2-1',
           meta: { title: 'Menu 1-2' },
           children: [
             {
               path: 'menu1-2-1',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
+              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1/index.vue'),
               name: 'Menu1-2-1',
               meta: { title: 'Menu 1-2-1' }
             },
             {
               path: 'menu1-2-2',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
+              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2/index.vue'),
               name: 'Menu1-2-2',
               meta: { title: 'Menu 1-2-2' }
             }
@@ -48,7 +48,7 @@ const nestedRouter = {
         },
         {
           path: 'menu1-3',
-          component: () => import('@/views/nested/menu1/menu1-3'),
+          component: () => import('@/views/nested/menu1/menu1-3/index.vue'),
           name: 'Menu1-3',
           meta: { title: 'Menu 1-3' }
         }
@@ -57,7 +57,7 @@ const nestedRouter = {
     {
       path: 'menu2',
       name: 'Menu2',
-      component: () => import('@/views/nested/menu2/index'),
+      component: () => import('@/views/nested/menu2/index.vue'),
       meta: { title: 'Menu 2' }
     }
   ]
diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue
new file mode 100644
index 0000000..30cb670
--- /dev/null
+++ b/src/views/nested/menu1/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert :closable="false" title="menu 1">
+      <router-view />
+    </el-alert>
+  </div>
+</template>
diff --git a/src/views/nested/menu1/menu1-1/index.vue b/src/views/nested/menu1/menu1-1/index.vue
new file mode 100644
index 0000000..27e173a
--- /dev/null
+++ b/src/views/nested/menu1/menu1-1/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert :closable="false" title="menu 1-1" type="success">
+      <router-view />
+    </el-alert>
+  </div>
+</template>
diff --git a/src/views/nested/menu1/menu1-2/index.vue b/src/views/nested/menu1/menu1-2/index.vue
new file mode 100644
index 0000000..0c86276
--- /dev/null
+++ b/src/views/nested/menu1/menu1-2/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert :closable="false" title="menu 1-2" type="success">
+      <router-view />
+    </el-alert>
+  </div>
+</template>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
new file mode 100644
index 0000000..7fb31a5
--- /dev/null
+++ b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
+  </div>
+</template>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
new file mode 100644
index 0000000..82b922d
--- /dev/null
+++ b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert :closable="false" title="menu 1-2-2" type="warning" />
+  </div>
+</template>
diff --git a/src/views/nested/menu1/menu1-3/index.vue b/src/views/nested/menu1/menu1-3/index.vue
new file mode 100644
index 0000000..1656e11
--- /dev/null
+++ b/src/views/nested/menu1/menu1-3/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert :closable="false" title="menu 1-3" type="success" />
+  </div>
+</template>
diff --git a/src/views/nested/menu2/index.vue b/src/views/nested/menu2/index.vue
new file mode 100644
index 0000000..19dd48f
--- /dev/null
+++ b/src/views/nested/menu2/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert :closable="false" title="menu 2" />
+  </div>
+</template>
diff --git a/src/views/pdf/content.js b/src/views/pdf/content.js
index d2cee75..a5e32b8 100644
--- a/src/views/pdf/content.js
+++ b/src/views/pdf/content.js
@@ -9,7 +9,7 @@ const content = `<p>Last week at<a href="https://vuejs.london/summary" rel="nofo
 <h4>High-Level APIChanges</h4>
 <blockquote>TL;DR: Everything except render function API and scoped-slots syntax will either remain the same or can be made 2.x compatible via a compatibility build.</blockquote>
 <p>Since it’s a new major, there is going to be some breaking changes. However, we take backwards compatibility seriously, so we want to start communicating these changes as soon as possible. Here’s the currently planned public API changes:</p>
-<ul><li>Template syntax will remain 99% the same. There may be small tweaks in scoped slots syntax, but other than that we have no plans to change anything else for templates.</li><li>3.0 will support class-based components natively, with the aim to provide an API that is pleasant to use in native ES2015 without requiring any transpilation or stage-x features. Most current options will have a reasonable mapping in the class-based API. Stage-x features such as class fields and decorators can still be used optionally to enhance the authoring experience. In addition, the API is designed with TypeScript type inference in mind. The 3.x codebase will itself be written in TypeScript, and providing improved TypeScript support. (That said, usage of TypeScript in an application is still entirely optional.)</li><li>The 2.x object-based component format will still be supported by internally transforming the object to a corresponding class.</li><li>Mixins will still be supported.*</li><li>Top level APIs will likely receive an overhaul to avoid globally mutating the Vue runtime when installing plugins. Instead, plugins will be applied and scoped to a component tree. This will make it easier to test components that rely on specific plugins, and also make it possible to mount multiple Vue applications on the same page with different plugins, but using the same Vue runtime.*</li><li>Functional components can finally be plain functions —however, async components will now need to be explicitly created via a helper function.</li><li>The part that will receive the most changes is the Virtual DOM format used in render functions. We are currently collecting feedback from major library authors and will be sharing more details as we are more confident of the changes, but as long as you don’t heavily rely on hand-written (non-JSX) render functions in your app, upgrading should be a reasonably straightforward process.</li></ul>
+<ul><li>Template syntax will remain 99% the same. There may be small tweaks in scoped slots syntax, but other than that we have no plans to change anything else for templates.</li><li>3.0 will support class-based components natively, with the aim to provide an API that is pleasant to use in native ES2015 without requiring any transpilation or stage-x features. Most current options will have a reasonable mapping in the class-based API. Stage-x features such as class fields and decorators can still be used optionally to enhance the authoring experience. In addition, the API is designed with TypeScript type inference in mind. The 3.x codebase will itself be written in TypeScript, and providing improved TypeScript support. (That said, usage of TypeScript in an application is still entirely optional.)</li><li>The 2.x object-based component format will still be supported by internally transforming the object to a corresponding class.</li><li>Mixins will still be supported.*</li><li>Top level APIs will likely receive an overhaul to avoid globally mutating the Vue runtime when installing plugins. Instead, plugins will be applied and scoped to a component tree. This will make it easier to test components that rely on specific plugins, and also make it possible to mount multiple Vue applications on the same page with different plugins, but using the same Vue runtime.*</li><li>*(deprecated) Functional components can finally be plain functions —however, async components will now need to be explicitly created via a helper function.</li><li>The part that will receive the most changes is the Virtual DOM format used in render functions. We are currently collecting feedback from major library authors and will be sharing more details as we are more confident of the changes, but as long as you don’t heavily rely on hand-written (non-JSX) render functions in your app, upgrading should be a reasonably straightforward process.</li></ul>
 <h4>Source Code Architecture</h4>
 <blockquote>TL;DR: better decoupled internal modules, TypeScript, and a codebase that is easier to contribute to.</blockquote>
 <p>We are re-writing 3.0 from the ground up for a cleaner and more maintainable architecture, in particular trying to make it easier to contribute to. We are breaking some internal functionalities into individual packages in order to isolate the scope of complexity. For example, the observer module will become its own package, with its own public API and tests. Note this does not affect framework-level API— you will not have to manually import individual bits from multiple packages in order to use Vue. Instead, the final Vue package is assembled using these internal packages.</p>