From c0299b47df600790dfd91108387d5b1fbd1462b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Thu, 27 Apr 2023 03:40:22 +0000
Subject: [PATCH 1/8] 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈嘉鑫 <2971973423@qq.com>
---
 .../20230427-ddd.md"                          | 100 ++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 "06\351\231\210\345\230\211\351\221\253/20230427-ddd.md"

diff --git "a/06\351\231\210\345\230\211\351\221\253/20230427-ddd.md" "b/06\351\231\210\345\230\211\351\221\253/20230427-ddd.md"
new file mode 100644
index 0000000..8086e76
--- /dev/null
+++ "b/06\351\231\210\345\230\211\351\221\253/20230427-ddd.md"
@@ -0,0 +1,100 @@
+# main.js
+```
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import Login from './components/Login.vue' 
+import Index from './components/Index.vue' 
+import Look from './components/Look.vue'
+import Product from './components/Product.vue' 
+import { createRouter,createWebHistory } from 'vue-router'
+
+const routes = [
+    {
+        path:'/',
+        component:Login
+    },
+    {
+        path:'/index',
+        component:Index,
+        children:[
+            {
+            path:'look',
+            component:Look
+            },
+            {
+            path:'product',
+            component:Product
+            }
+        ]
+    }
+]
+
+const router = createRouter({
+    history:createWebHistory(),
+    routes
+})
+createApp(App).use(router).mount('#app')
+```
+# Index.vue
+```
+<script>
+export default {
+    methods: {
+        fn(url) {
+            this.$router.push(url)
+        }
+    }
+}
+</script>
+<template>
+<div><h1 style="color: red">首页</h1></div>
+<div><RouterView></RouterView></div>
+<div><input type="button" value="product" @click="fn('/index/product')"> <input type="button" value="look" @click="fn('/index/look')"></div>
+</template>
+```
+# Login.vue
+```
+<script setup>
+import { RouterLink } from 'vue-router';
+</script>
+
+<template>
+<div>登录</div>
+<div></div>
+<RouterLink to="/index">首页</RouterLink>
+</template>
+```
+# Look.vue
+```
+<script setup>
+
+</script>
+
+<template>
+<div class="look">Look</div>
+</template>
+
+<style scoped>
+</style>
+```
+# Product.vue
+```
+<script setup>
+
+</script>
+
+<template>
+Product
+</template>
+```
+# App.vue
+```
+<script setup>
+
+</script>
+
+<template>
+<RouterView></RouterView>
+</template>
+```
\ No newline at end of file
-- 
Gitee


From 902c4d334d37dcab9b6916b001f207c435f13a2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Fri, 28 Apr 2023 05:04:01 +0000
Subject: [PATCH 2/8] 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈嘉鑫 <2971973423@qq.com>
---
 ...57\347\224\261\345\214\271\351\205\215.md" | 175 ++++++++++++++++++
 1 file changed, 175 insertions(+)
 create mode 100644 "06\351\231\210\345\230\211\351\221\253/20230425-\345\265\214\345\245\227\350\267\257\347\224\261\345\222\214\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md"

diff --git "a/06\351\231\210\345\230\211\351\221\253/20230425-\345\265\214\345\245\227\350\267\257\347\224\261\345\222\214\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" "b/06\351\231\210\345\230\211\351\221\253/20230425-\345\265\214\345\245\227\350\267\257\347\224\261\345\222\214\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md"
new file mode 100644
index 0000000..a8812d3
--- /dev/null
+++ "b/06\351\231\210\345\230\211\351\221\253/20230425-\345\265\214\345\245\227\350\267\257\347\224\261\345\222\214\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md"
@@ -0,0 +1,175 @@
+# 嵌套路由
+## 作用
+```
+嵌套路由的使用场景是什么呢？
+大家都知道选项卡，在选项卡中，顶部有数个导航栏，中间的主体显示的是内容。 
+这个时候，整个页面是一个路由，然后点击选项卡切换不同的路由来展示不同的内容，
+这时候就可以用嵌套路由来实现。
+```
+## 代码显示
+### main.js
+```
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import Test from './components/Test.vue'
+import Cjx from './components/Cjx.vue'
+import Cjxo from './components/Cjxo.vue'
+import Cjxt from './components/Cjxt.vue'
+import {createRouter,createWebHistory} from 'vue-router'
+
+const routes = [
+{
+    path:'/',
+    component:Test
+},
+{
+    path:'/cjx',
+    component:Cjx,
+    children:[
+     {
+        path:'cjxo',
+        component:Cjxo
+     },
+     {
+        path:'cjxt',
+        component:Cjxt
+     }
+    ]
+}
+]
+
+const router = createRouter({
+    history:createWebHistory(),
+    routes
+})
+
+createApp(App).use(router).mount('#app')
+```
+### App.vue
+```
+<script>
+</script>
+
+<template>
+  <RouterView></RouterView>
+</template>
+```
+### Test.vue
+```
+<script>
+</script>
+
+<template>
+    <div>登录页面</div>
+  <RouterLink to="/cjx">首页</RouterLink>
+</template>
+```
+### Cjx.vue
+```
+<script>
+</script>
+
+<template>
+    <div>
+        首页<br>
+        <RouterLink to="/cjx/cjxo">cjxo</RouterLink>  <RouterLink to="/cjx/cjxt">cjxt</RouterLink><br>
+    </div>
+    <RouterView></RouterView>
+</template>
+```
+### Cjxo.vue
+```
+<script>
+</script>
+
+<template>
+  我是cjxo
+</template>
+```
+### Cjxt.vue
+```
+<script>
+</script>
+
+<template>
+  我是cjxt
+</template>
+```
+## 效果图
+[![p9K2s29.md.jpg](https://s1.ax1x.com/2023/04/26/p9K2s29.md.jpg)](https://imgse.com/i/p9K2s29)
+
+[![p9K2gDx.md.png](https://s1.ax1x.com/2023/04/26/p9K2gDx.md.png)](https://imgse.com/i/p9K2gDx)
+
+[![p9K22b6.md.jpg](https://s1.ax1x.com/2023/04/26/p9K22b6.md.jpg)](https://imgse.com/i/p9K22b6)
+
+# 动态路由匹配
+## 可重复的参数
+```
+如果你需要匹配具有多个部分的路由，如 /first/second/third，你应该用 *（0 个或多个）和 +（1 个或多个）
+将参数标记为可重复
+```
+```
+const routes = [
+  // /:chapters ->  匹配 /one, /one/two, /one/two/three, 等
+  { path: '/:chapters+' },
+  // /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等
+  { path: '/:chapters*' },
+]
+```
+这将为你提供一个参数数组，而不是一个字符串，并且在使用命名路由时也需要你传递一个数组：
+
+```
+// 给定 { path: '/:chapters*', name: 'chapters' },
+router.resolve({ name: 'chapters', params: { chapters: [] } }).href
+// 产生 /
+router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href
+// 产生 /a/b
+
+// 给定 { path: '/:chapters+', name: 'chapters' },
+router.resolve({ name: 'chapters', params: { chapters: [] } }).href
+// 抛出错误，因为 `chapters` 为空 
+```
+这些也可以通过在右括号后添加它们与自定义正则结合使用：
+```
+const routes = [
+  // 仅匹配数字
+  // 匹配 /1, /1/2, 等
+  { path: '/:chapters(\\d+)+' },
+  // 匹配 /, /1, /1/2, 等
+  { path: '/:chapters(\\d+)*' },
+]
+```
+## Sensitive 与 strict 路由配置
+```
+默认情况下，所有路由是不区分大小写的，并且能匹配带有或不带有尾部斜线的路由。例如，
+路由 /users 将匹配 /users、/users/、甚至 /Users/。这种行为可以通过 strict 和 
+sensitive 选项来修改，它们可以既可以应用在整个全局路由上，又可以应用于当前路由上：
+
+```
+```
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    // 将匹配 /users/posva 而非：
+    // - /users/posva/ 当 strict: true
+    // - /Users/posva 当 sensitive: true
+    { path: '/users/:id', sensitive: true },
+    // 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/
+    { path: '/users/:id?' },
+  ],
+  strict: true, // applies to all routes
+})
+```
+## 可选参数
+你也可以通过使用 ? 修饰符(0 个或 1 个)将一个参数标记为可选：
+
+```
+const routes = [
+  // 匹配 /users 和 /users/posva
+  { path: '/users/:userId?' },
+  // 匹配 /users 和 /users/42
+  { path: '/users/:userId(\\d+)?' },
+]
+请注意，* 在技术上也标志着一个参数是可选的，但 ? 参数不能重复。
+```
\ No newline at end of file
-- 
Gitee


From 733905af00719de5e24041667dff6179756e4aea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Fri, 28 Apr 2023 05:04:16 +0000
Subject: [PATCH 3/8] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2006=E9=99=88?=
 =?UTF-8?q?=E5=98=89=E9=91=AB/20230423-=E8=B7=AF=E7=94=B1.md=20=E4=B8=BA?=
 =?UTF-8?q?=2006=E9=99=88=E5=98=89=E9=91=AB/20230424-=E8=B7=AF=E7=94=B1.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20230424-\350\267\257\347\224\261.md"                         | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "06\351\231\210\345\230\211\351\221\253/20230423-\350\267\257\347\224\261.md" => "06\351\231\210\345\230\211\351\221\253/20230424-\350\267\257\347\224\261.md" (100%)

diff --git "a/06\351\231\210\345\230\211\351\221\253/20230423-\350\267\257\347\224\261.md" "b/06\351\231\210\345\230\211\351\221\253/20230424-\350\267\257\347\224\261.md"
similarity index 100%
rename from "06\351\231\210\345\230\211\351\221\253/20230423-\350\267\257\347\224\261.md"
rename to "06\351\231\210\345\230\211\351\221\253/20230424-\350\267\257\347\224\261.md"
-- 
Gitee


From 039a1dfa7900c97434182a770cef283f521398de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Fri, 28 Apr 2023 05:05:14 +0000
Subject: [PATCH 4/8] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2006=E9=99=88?=
 =?UTF-8?q?=E5=98=89=E9=91=AB/20230427-ddd.md=20=E4=B8=BA=2006=E9=99=88?=
 =?UTF-8?q?=E5=98=89=E9=91=AB/20230427=E7=BC=96=E7=A8=8B=E5=BC=8F=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...47\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "06\351\231\210\345\230\211\351\221\253/20230427-ddd.md" => "06\351\231\210\345\230\211\351\221\253/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md" (100%)

diff --git "a/06\351\231\210\345\230\211\351\221\253/20230427-ddd.md" "b/06\351\231\210\345\230\211\351\221\253/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md"
similarity index 100%
rename from "06\351\231\210\345\230\211\351\221\253/20230427-ddd.md"
rename to "06\351\231\210\345\230\211\351\221\253/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md"
-- 
Gitee


From 7fdf8256a1921ff932a4bc3d4ea5f72ce4e52e7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Fri, 28 Apr 2023 06:04:56 +0000
Subject: [PATCH 5/8] =?UTF-8?q?update=2006=E9=99=88=E5=98=89=E9=91=AB/2023?=
 =?UTF-8?q?0427=E7=BC=96=E7=A8=8B=E5=BC=8F=E5=AF=BC=E8=88=AA.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈嘉鑫 <2971973423@qq.com>
---
 ...226\347\250\213\345\274\217\345\257\274\350\210\252.md" | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git "a/06\351\231\210\345\230\211\351\221\253/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md" "b/06\351\231\210\345\230\211\351\221\253/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md"
index 8086e76..fb605a0 100644
--- "a/06\351\231\210\345\230\211\351\221\253/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md"
+++ "b/06\351\231\210\345\230\211\351\221\253/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md"
@@ -72,11 +72,8 @@ import { RouterLink } from 'vue-router';
 </script>
 
 <template>
-<div class="look">Look</div>
+<div>look</div>
 </template>
-
-<style scoped>
-</style>
 ```
 # Product.vue
 ```
@@ -85,7 +82,7 @@ import { RouterLink } from 'vue-router';
 </script>
 
 <template>
-Product
+<div>product</div>
 </template>
 ```
 # App.vue
-- 
Gitee


From d6489e6c082480454f0673dbdbb6b3906f2ee1f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Mon, 1 May 2023 03:37:14 +0000
Subject: [PATCH 6/8] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2006=E9=99=88?=
 =?UTF-8?q?=E5=98=89=E9=91=AB/20230427=E7=BC=96=E7=A8=8B=E5=BC=8F=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA.md=20=E4=B8=BA=2006=E9=99=88=E5=98=89=E9=91=AB/202304?=
 =?UTF-8?q?27-=E7=BC=96=E7=A8=8B=E5=BC=8F=E5=AF=BC=E8=88=AA=E3=80=81?=
 =?UTF-8?q?=E5=91=BD=E5=90=8D=E8=B7=AF=E7=94=B1=E3=80=81=E5=91=BD=E5=90=8D?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...43\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md" | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "06\351\231\210\345\230\211\351\221\253/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md" => "06\351\231\210\345\230\211\351\221\253/20230427-\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\343\200\201\345\221\275\345\220\215\350\267\257\347\224\261\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md" (100%)

diff --git "a/06\351\231\210\345\230\211\351\221\253/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md" "b/06\351\231\210\345\230\211\351\221\253/20230427-\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\343\200\201\345\221\275\345\220\215\350\267\257\347\224\261\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md"
similarity index 100%
rename from "06\351\231\210\345\230\211\351\221\253/20230427\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252.md"
rename to "06\351\231\210\345\230\211\351\221\253/20230427-\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\343\200\201\345\221\275\345\220\215\350\267\257\347\224\261\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md"
-- 
Gitee


From 05906d87b670ef7f246d9eca1af046cfac4defc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Mon, 1 May 2023 03:37:46 +0000
Subject: [PATCH 7/8] =?UTF-8?q?update=2006=E9=99=88=E5=98=89=E9=91=AB/2023?=
 =?UTF-8?q?0427-=E7=BC=96=E7=A8=8B=E5=BC=8F=E5=AF=BC=E8=88=AA=E3=80=81?=
 =?UTF-8?q?=E5=91=BD=E5=90=8D=E8=B7=AF=E7=94=B1=E3=80=81=E5=91=BD=E5=90=8D?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈嘉鑫 <2971973423@qq.com>
---
 ...75\345\220\215\350\247\206\345\233\276.md" | 127 +++++++++++++++++-
 1 file changed, 120 insertions(+), 7 deletions(-)

diff --git "a/06\351\231\210\345\230\211\351\221\253/20230427-\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\343\200\201\345\221\275\345\220\215\350\267\257\347\224\261\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md" "b/06\351\231\210\345\230\211\351\221\253/20230427-\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\343\200\201\345\221\275\345\220\215\350\267\257\347\224\261\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md"
index fb605a0..e714755 100644
--- "a/06\351\231\210\345\230\211\351\221\253/20230427-\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\343\200\201\345\221\275\345\220\215\350\267\257\347\224\261\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md"
+++ "b/06\351\231\210\345\230\211\351\221\253/20230427-\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\343\200\201\345\221\275\345\220\215\350\267\257\347\224\261\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md"
@@ -1,4 +1,5 @@
-# main.js
+# 编程式导航
+### main.js
 ```
 import { createApp } from 'vue'
 import './style.css'
@@ -36,7 +37,7 @@ const router = createRouter({
 })
 createApp(App).use(router).mount('#app')
 ```
-# Index.vue
+### Index.vue
 ```
 <script>
 export default {
@@ -53,7 +54,7 @@ export default {
 <div><input type="button" value="product" @click="fn('/index/product')"> <input type="button" value="look" @click="fn('/index/look')"></div>
 </template>
 ```
-# Login.vue
+### Login.vue
 ```
 <script setup>
 import { RouterLink } from 'vue-router';
@@ -65,7 +66,7 @@ import { RouterLink } from 'vue-router';
 <RouterLink to="/index">首页</RouterLink>
 </template>
 ```
-# Look.vue
+### Look.vue
 ```
 <script setup>
 
@@ -75,7 +76,7 @@ import { RouterLink } from 'vue-router';
 <div>look</div>
 </template>
 ```
-# Product.vue
+### Product.vue
 ```
 <script setup>
 
@@ -85,7 +86,7 @@ import { RouterLink } from 'vue-router';
 <div>product</div>
 </template>
 ```
-# App.vue
+### App.vue
 ```
 <script setup>
 
@@ -94,4 +95,116 @@ import { RouterLink } from 'vue-router';
 <template>
 <RouterView></RouterView>
 </template>
-```
\ No newline at end of file
+```
+## 替换当前位置
+```
+它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，
+正如它的名字所暗示的那样——它取代了当前的条目。
+```
+也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true ：
+
+```
+<script setup>
+import {useRouter} from 'vue-router'
+const router = useRouter();
+
+const fn = function(url){
+    router.push({path:url,replace:true})
+}
+</script>
+
+<template>
+    <div>
+        首页<br>
+    </div>
+    <RouterView></RouterView>
+    <div>
+    <input type="button" value="cjxo" @click="fn('/cjx/cjxo')">
+    <input type="button" value="cjxt" @click="fn('/cjx/cjxt')">
+    </div>
+</template>
+```
+## 横跨历史
+该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)
+```
+<script setup>
+import {useRouter} from 'vue-router'
+const router = useRouter();
+
+const fn = function(url){
+    router.push(url)
+}
+
+const next = function() {
+    router.go(1);
+}
+
+const prev = function() {
+    router.back();
+}
+</script>
+
+<template>
+    <div>
+        首页<br>
+    </div>
+    <RouterView></RouterView>
+    <div>
+    <input type="button" value="cjxo" @click="fn('/cjx/cjxo')">
+    <input type="button" value="cjxt" @click="fn('/cjx/cjxt')">
+    <input type="button" value="next" @click="next()">
+    <input type="button" value="prev" @click="prev()">
+    </div>
+</template>
+```
+# 命名路由
+```
+除了 path 之外，你还可以为任何路由提供 name。这有以下优点：
+
+没有硬编码的 URL
+params 的自动编码/解码。
+防止你在 url 中出现打字错误。
+绕过路径排序（如显示一个）
+```
+```
+const routes = [
+  {
+    path: '/user/:username',
+    name: 'user',
+    component: User,
+  },
+]
+要链接到一个命名的路由，可以向 router-link 组件的 to 属性传递一个对象：
+
+<router-link :to="{ name: 'user', params: { username: 'erina' }}">
+  User
+</router-link>
+这跟代码调用 router.push() 是一回事：
+
+router.push({ name: 'user', params: { username: 'erina' } })
+在这两种情况下，路由将导航到路径 /user/erina。
+```
+
+# 命名视图
+```
+有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航)
+ 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，
+ 而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default
+```
+一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用components配置 (带上 s)：
+## 代码如下：
+### main.js
+```
+  path:'cjxo',
+  components:{
+    default:Cjxo,
+    cjxo:ccc
+}
+```
+### Cjx.vue
+```
+    <RouterView></RouterView>
+    <RouterView name="cjxo"></RouterView>
+```
+## 效果图
+[![p98sZss.md.jpg](https://s1.ax1x.com/2023/05/01/p98sZss.md.jpg)](https://imgse.com/i/p98sZss)
-- 
Gitee


From 67c95185a9f34b0f7e645a61ad3462c653e98ed8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E9=91=AB?= <2971973423@qq.com>
Date: Mon, 1 May 2023 03:45:31 +0000
Subject: [PATCH 8/8] 1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈嘉鑫 <2971973423@qq.com>
---
 .../20230428-element-ui.md"                   | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 "06\351\231\210\345\230\211\351\221\253/20230428-element-ui.md"

diff --git "a/06\351\231\210\345\230\211\351\221\253/20230428-element-ui.md" "b/06\351\231\210\345\230\211\351\221\253/20230428-element-ui.md"
new file mode 100644
index 0000000..87415d5
--- /dev/null
+++ "b/06\351\231\210\345\230\211\351\221\253/20230428-element-ui.md"
@@ -0,0 +1,67 @@
+# element-ui
+## 网址
+```
+https://element.eleme.cn/
+```
+## 安装
+```
+npm i element-ui -S
+```
+## 引入 Element
+你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
+
+## 完整引入
+在 main.js 中写入以下内容：
+```
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
+
+Vue.use(ElementUI);
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
+```
+以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
+
+## 按需引入
+借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
+```
+首先，安装 babel-plugin-component：
+
+npm install babel-plugin-component -D
+然后，将 .babelrc 修改为：
+
+{
+  "presets": [["es2015", { "modules": false }]],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ]
+}
+接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
+
+import Vue from 'vue';
+import { Button, Select } from 'element-ui';
+import App from './App.vue';
+
+Vue.component(Button.name, Button);
+Vue.component(Select.name, Select);
+/* 或写为
+ * Vue.use(Button)
+ * Vue.use(Select)
+ */
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
+```
\ No newline at end of file
-- 
Gitee