diff --git "a/49\350\223\235\346\226\207\351\276\231/2023-04-17 \347\273\204\344\273\266\346\263\250\345\206\214.md" "b/49\350\223\235\346\226\207\351\276\231/2023-04-17 \347\273\204\344\273\266\346\263\250\345\206\214.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ea049f5947df041d41f689413bddccdd77c70fa6
--- /dev/null
+++ "b/49\350\223\235\346\226\207\351\276\231/2023-04-17 \347\273\204\344\273\266\346\263\250\345\206\214.md"	
@@ -0,0 +1,94 @@
+
+#
+## 一.全局注册: component() 方法
+
++ 在vue项目中的main.js文件中使用app.component() 方法
+
++ app.component() 方法可以被链式调用
+
+```js
+// main.js
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+//导入文件
+import f1 from './components/f1.vue'
+import f2 from './components/f2.vue'
+
+const app=createApp(App)
+
+//注册被导入的文件，链式调用
+app.component('f1',f1).component('f2',f2)
+app.mount('#app')
+
+```
+```vue
+<!-- App.vue -->
+<script setup>
+</script>
+
+<template>
+<f1/>
+  <h1>测试</h1>
+<f2></f2>
+</template>
+
+<!-- f1.vue -->
+<template>
+    <div>
+        <h1>吃饭了</h1>
+    </div>
+</template>
+```
+
+#
+## 二.局部注册
+
++ 局部注册的组件在后代组件中并不可用。
+
++ 在选项式中，需要使用**components** 选项注册
+```vue
+<script>
+import ComponentA from './ComponentA.vue'
+
+export default {
+  components: {
+    ComponentA
+  }
+}
+</script>
+
+<template>
+  <ComponentA />
+</template>
+
+```
+
++ 在组合式中，导入的组件可以直接在模板中使用，无需注册
+```vue
+<script setup>
+import ComponentA from './ComponentA.vue'
+</script>
+
+<template>
+  <ComponentA />
+</template>
+
+```
+
+#
+## 三.全局和局部对比
+
+
+### 全局注册的问题:
+
++ 1. 全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。
+
++ 2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。
+
+### 局部
+
++ 1. 局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。
+
++ 2. 它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。
\ No newline at end of file
diff --git "a/49\350\223\235\346\226\207\351\276\231/2023-04-18 \345\242\250\345\210\200\345\210\266\344\275\234\345\216\237\345\236\213.md" "b/49\350\223\235\346\226\207\351\276\231/2023-04-18 \345\242\250\345\210\200\345\210\266\344\275\234\345\216\237\345\236\213.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5c89ab9744ebee084417f9ed9b530c1d206f18c3
--- /dev/null
+++ "b/49\350\223\235\346\226\207\351\276\231/2023-04-18 \345\242\250\345\210\200\345\210\266\344\275\234\345\216\237\345\236\213.md"	
@@ -0,0 +1,16 @@
+# 墨刀创建原型
+
+详细介绍网站: https://modao.cc/hc/articles/5
+
++ 在新建中选择项目，有空白项目和模板中创建项目两个选项，笔者主要以空白项目为例，输入项目名称、选择设备类型及型号，点击创建按钮。
+
++ 创建项目之后，进入工作区，右边有各种组件，图标，母板。可直接将组件和图标拖到页面，然后根据需要进行修改或直接使用。
+
++ 页面状态从属于某页面，原型内每个页面下都可以新建若干状态。但同一页面的不同状态中，组件必须一致，且只能在全局状态中添加或删除组件。本例选择的就是在一个页面中创建多个状态。
+
+
+![1](./img/230418/1.png)
+
+![2](./img/230418/2.png)
+
+![3](./img/230418/3.png)
diff --git "a/49\350\223\235\346\226\207\351\276\231/2023-04-20 \346\267\261\345\205\245Props.md" "b/49\350\223\235\346\226\207\351\276\231/2023-04-20 \346\267\261\345\205\245Props.md"
new file mode 100644
index 0000000000000000000000000000000000000000..74a8180a15276d21669ff334bb16c30c9be647e7
--- /dev/null
+++ "b/49\350\223\235\346\226\207\351\276\231/2023-04-20 \346\267\261\345\205\245Props.md"	
@@ -0,0 +1,153 @@
+
+#
+## 一.定义 Props 选项
+
++ 选项式的定义:
+
+    + 没有使用 <**script setup**> 的组件方式为**选项式**，运用的是**选项式的API**
+
+    + 在选项式中，prop 可以使用 **props 选项**来声明
+```vue
+<script>
+export default{
+    props:{
+        xx:String,//字符串类型
+        arr:Array,//数组类型
+        judge:Boolean,//布尔值类型
+        author:Object,//属性类型
+        figure:Number
+    }
+}
+</script>
+```
+
++ 组合式的定义:
+
+    + 使用 <**script setup**> 的单文件组件为**组合式**，运用的是**组合式的API**
+
+    + 在组合式中，props 可以使用 **defineProps() 宏**来声明
+```vue
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  xx:String,
+  arr:Array
+})
+</script>
+```
+
++ 传递给 defineProps() 的参数和提供给 props 选项的值是相同的，两种声明方式背后其实使用的都是 **prop 选项**。
+
+#
+## 二.细节
+
+### 命名格式
+
++ Prop 的命名格式使用 **camelCase 形式(小驼峰形式)**
+
++ 组件名 的命名格式使用 **PascalCase 形式**，因为这提高了模板的可读性，能帮助我们区分 Vue 组件和原生 HTML 元素。
+
+### prop 的绑定
+
++ 直接使用 prop 的名字来进行静态形式的绑定
+```html
+<HelloWorld xx="下班了，吃饭了"/>
+```
+
++ 使用 **v-bind** 或**缩写 :** 来进行动态形式的绑定：当使用一个 JavaScript 表达式而不是一个字符串需要用到
+```html
+<HelloWorld :arr="arr"/>
+```
+
+### 传递不同类型
+
++ Number 类型:使用 **v-bind** 动态的绑定
+
++ Boolean 类型(布尔):
+
+    + 不传值时，会隐性为 true ;
+    ```html
+    <Props judge />
+    ```
+
+    + 传值时，需要使用 **v-bind** 进行动态的绑定
+
++ Array 类型(数组):使用 **v-bind** 动态的绑定
+
++ Object 类型(属性):使用 **v-bind** 动态的绑定
+```vue
+<!-- Props.vue -->
+<script>
+export default{
+    props:{
+        xx:String,//字符串
+        arr:Array,//数组
+        judge:Boolean,//布尔值
+        author:Object,//属性
+        figure:Number
+    }
+}
+</script>
+<!-- App.vue -->
+<template>
+  <div>
+    <Props 
+    xx="下班了，吃饭了" 
+    :arr="arr" 
+    judge 
+    :author="{
+      name:'鸡腿'
+    }"
+    :figure=12 />
+  </div>
+</template>
+```
+
+### Prop 校验
+
+详细的校验信息 : https://cn.vuejs.org/guide/components/props.html#prop-validation
+
+```vue
+<!-- 选项式的校验 -->
+<script>
+export default{
+    props:{
+        propsA:{
+            //基础类型检查
+            type:String,
+            //设置默认值
+            default:'吃饭'
+        }
+    }
+}
+</script>
+
+<!-- 组合式的校验 -->
+<script setup>
+    defineProps({
+        // 基础类型检查
+        // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
+        propA: Number,
+        // Number 类型的默认值
+        propD: {
+            type: Number,
+            default: 100
+        }
+    })
+</script>
+
+<template>
+    <div>
+        <h1>{{propsA}}</h1>
+    </div>
+</template>
+```
+
+## 三.其他细节
+
++ 所有 prop 默认都是可选的，除非声明了 required: true
+
++ Boolean 类型的未传递 prop 将被转换为 false。这可以通过为它设置 default 来更改
+
++ 如果声明了 default 值，那么在 prop 的值被解析为 undefined 时，无论 prop 是未被传递还是显式指明的 undefined，都会改为 default 值。
\ No newline at end of file
diff --git "a/49\350\223\235\346\226\207\351\276\231/2023-04-21 \346\267\261\345\205\245\344\272\213\344\273\266.md" "b/49\350\223\235\346\226\207\351\276\231/2023-04-21 \346\267\261\345\205\245\344\272\213\344\273\266.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4080ed9203de325cc4851e562685d71e940eeb92
--- /dev/null
+++ "b/49\350\223\235\346\226\207\351\276\231/2023-04-21 \346\267\261\345\205\245\344\272\213\344\273\266.md"	
@@ -0,0 +1,162 @@
+
+#
+## 一.定义触发的事件
+
++ 选项式的定义
+
+    + 通过 **emits 选项**来定义它要触发的事件
+```vue
+<script>
+export default {
+  emits: ['inFocus', 'submit'],
+  methods:{
+            fn(){
+                this.$emit('someEvent',this.student.name.trim(),this.student.password.trim())
+            }
+        },
+}
+</script>
+
+```
+
++ 组合式的定义
+
+    + 通过 **defineEmits() 宏**来声明它要触发的事件
+
+```vue
+<script setup>
+const emit = defineEmits(['inFocus', 'submit'])
+
+function buttonClick() {
+  emit('submit')
+}
+</script>
+
+```
+
+#
+## 二.事件的监听和校验
+
++ 通过 **v-on (缩写为 @)** 来监听事件
+
++ 通过返回值为 `true` 还是为 `false` 来判断验证是否通过
+
+### 组合式
+```vue
+<!-- 组合式 -->
+<script setup>
+  import {ref,reactive} from 'vue'
+
+  const student=reactive({
+    email:'',
+    password:''
+  })
+
+        // 定义触发的事件
+  const emit=defineEmits({
+    //校验传递出来的数据
+    someEvent:(email,password)=>{
+      if(email.trim()&& password.trim()){
+        return true
+      }else{
+        if(email.trim()){
+          console.warn('输入的密码为空，请重新输入')
+          return false
+        }
+        if(password.trim()){
+          console.warn('输入的邮箱为空，请重新输入')
+          return false
+        }
+        console.warn('输入的邮箱和密码为空，请重新输入')
+        return false
+      }
+    }
+  })
+
+    const fn=function(){
+    //传递定义的事件，将相关的值传入定义的事件
+    emit('someEvent',student.email.trim(),student.password.trim())
+  }
+
+</script>
+
+<template>
+  <div>
+    <table>
+      <tr>
+        <td><label for="">邮箱:</label></td>
+        <td>
+            <!-- 绑定数据 -->
+          <input type="email" v-model="student.email">
+        </td>
+      </tr>
+      <tr>
+        <td><label for="">密码:</label></td>
+        <td>
+          <input type="password" v-model="student.password">
+        </td>
+      </tr>
+      <tr>
+        <input type="button" value="登录" @click="fn">
+      </tr>
+    </table>
+  </div>
+</template>
+
+```
+
+### 选项式
+```vue
+<script>
+    export default{
+        data(){
+            return{
+                student:{
+                    name:'',
+                    password:''
+                }
+            }
+        },
+        methods:{
+            fn(){
+                this.$emit('someEvent',this.student.name.trim(),this.student.password.trim())
+            }
+        },
+        emits:{
+            someEvent:(name,password)=>{
+                if(name.trim()&& password.trim()){
+                    return true
+                }else{
+                    if(name.trim()){
+                        console.warn('输入的密码为空，请重新输入')
+                        return false
+                    }
+                    if(password.trim()){
+                        console.warn('输入的用户名为空，请重新输入')
+                        return false
+                    }
+                console.warn('输入的用户名和密码为空，请重新输入')
+                return false
+                }
+            }
+        },
+    }
+</script>
+```
+
+### 父组件接收数据: App.vue
+```vue
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+
+const fn=function(email,password){
+  console.log('+++++++++++++')
+  console.log(email)
+  console.log(password)
+}
+</script>
+
+<template>
+  <HelloWorld @someEvent="fn" />
+</template>
+```
diff --git "a/49\350\223\235\346\226\207\351\276\231/2023-04-23 \350\267\257\347\224\261\345\205\245\351\227\250.md" "b/49\350\223\235\346\226\207\351\276\231/2023-04-23 \350\267\257\347\224\261\345\205\245\351\227\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..991bc1d8cf43a1ae6277d7360c42435afc0b4a91
--- /dev/null
+++ "b/49\350\223\235\346\226\207\351\276\231/2023-04-23 \350\267\257\347\224\261\345\205\245\351\227\250.md"	
@@ -0,0 +1,111 @@
+
+#
+## 一.安装 vue-router
+
+### npm
+```
+    npm install vue-router
+```
+
+### yarn
+```
+    yarn add vue-router
+```
+
+#
+## 二.创建路由的配置文件:JavaScript
+```js
+//1.引用路由组件
+import Home from './components/Home.vue'
+import About from './components/About.vue'
+import Student from './components/Student.vue'
+
+//2.定义路由
+//每个路由都映射一个组件
+const routes=[
+    {path:'/',component:Home},
+    {path:'/about',component:About},
+    {path:'/student',component:Student}
+]
+
+//3.创建路由实例并传递 `routes` 配置
+//createRouter():需要引入
+const router=createRouter({
+
+    //4.提供 history 模式
+    // history:createWebHashHistory(),//路由会带#号
+    history:createWebHistory(),//使用时路由不带#号，但是会有点小问题，后面解决
+
+    routes//`routes:routes` 的缩写
+})
+
+
+//5.创建并挂载实例
+
+// createApp(App).use(router).mount('#app')
+
+const app=createApp(App)
+
+//让整个项目都支持路由
+app.use(router)
+app.mount('#app')
+```
+
+#
+## 三.RouterLink 和 RouterView
+
+### RouterLink : 入口
+
++ RouterLink 实现路由之间的跳转
+
++ RouterLink 对应 html 中的a 标签,但是与a 标签不同的是,跳转的时候并**不会刷新页面**
+
++ RouterLink映射的结果为其对应组件的整个页面内容
+
+```html
+    <!-- 动态响应，要跳转的id -->
+        <RouterLink :to="'/student/'+id">前往</RouterLink>
+        <br>
+        <RouterLink to="/student">返回</RouterLink>
+```
+
+### RouterView : 出口
+
++ RouterView 根据路由显示对应的组件,当你的路由path 与访问的地址相符时，会将指定的组件替换
+
++ RouterView 相当于RouterLink的承载页面,用于展示RouterLink 的的内容
+
+```html
+<RouterView></RouterView>
+```
+
+#
+## 四.显示页面有按钮
+
++ 在 App.vue 中导入首页
+```vue
+<script setup>
+import Home from './components/Home.vue'
+</script>
+
+<template>
+  <Home></Home>
+</template>
+```
+
+
+#
+## 五.显示页面无按钮存在
+
++ 在 App.vue 中设置出口 RouterView
+```vue
+<script setup>
+import Home from './components/Home.vue'
+</script>
+
+<template>
+  <!-- RouterView：出口 -->
+  <!-- 由入口进入的所有信息，都会在此页面输出 -->
+  <RouterView></RouterView>
+</template>
+```
diff --git "a/49\350\223\235\346\226\207\351\276\231/2023-04-24 \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md" "b/49\350\223\235\346\226\207\351\276\231/2023-04-24 \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c50cc4cd13f14a032c0580de7d40fd71852703e3
--- /dev/null
+++ "b/49\350\223\235\346\226\207\351\276\231/2023-04-24 \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215.md"	
@@ -0,0 +1,160 @@
+
+#
+## 一.设置路由的匹配
+
++ 进入路由配置文件，在定义的路由中添加相关的路径信息
+
+### 带参路由的动态匹配
+
++ 路径参数 用**冒号 :** 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 **this.$route.params** 的形式暴露出来。
+
++ **component** 获取要跳转页面的位置
+
+```js
+//2.定义路由
+const routes = [
+    { path: '/student/:id', component: StudentId },
+]
+```
+
+### 错误路由的匹配
+
++ 在括号之间使用了自定义正则表达式，并将 **pathMatch** 参数标记为可选可重复。
+
++ 在 to 中输入 **/:pathMatch(.*)** 匹配错误的路径信息
+
++ + **component** 获取要跳转页面的位置
+
+```js
+//2.定义路由
+const routes = [
+    //将匹配不到的报错页面，跳转为此页面
+    { path: '/:pathMatch(.*)', component: NotFound }
+]
+```
+
+#
+## 二.获取路由信息
+
++ **vue2**路由是通过this.$route和this.$router来控制的
+
++ **vue3**的路由中
+
+    + **useRoute** 相当于以前的 **this.$route**，
+
+    + **useRouter** 相当于 **this.$router**
+
+### $route
+
++ **route** 是一个跳转的路由对象，每一个路由都会有一个route对象
+
++ **route** 是一个**局部的对象**，可以获取对应的name,path,params,query等
+
+    + **$route.path** :获取当前路由对象的路径，会被解析为绝对路径，如 “/index/” 。
+
+    + **$route.params** ：获取包含路由中的动态片段和全匹配片段的键值对
+
+    + **$route.query** ：获取 **? 号传参**包含路由中查询参数的键值对。例如，对于 /index?id=1 ，会得到 $route.query.id == 1。
+```js
+    { path: '/student/:id', component: StudentId },
+```
+```html
+<h1>这里是id为{{ $route.params.id}} 的页面</h1>
+```
+
+
+### userRoute
+
++ 相当于 $route
+
++ **push方法** 是useRouter()才有的, 用**useRoute()实例化**的对象是没这方法的
+```js
+//实例化
+const route=userRoute()
+```
+
+### $router
+
++ **router** 是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象
+
++ **router** 是一个**全局的对象**，包含了所有的路由包含了许多关键的对象和属性。例如history对象
+
+    + **$router.push({path:’/path’})** : 本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录
+
+    + **$router.replace({path:’/path’})** : 替换路由，没有历史记录
+
+### userRouter
+
++ 相当于 $router 
+
++ 通过useRouter来手动控制路由变化
+
++ push方法是useRouter()才有的
+
+```js
+//实例化
+const router=userRouter()
+```
+
+#
+## 三.响应路由变化 :watch
+
++ 使用 **watch 侦听器** 获取路由的变化
+
+### 选项式中
+```vue
+<script>
+export default {
+    data() {
+        return {
+            ifValue: '',
+        }
+    },
+    //created方法是一个生命周期钩子函数
+    created() {
+        this.$watch(
+            () => this.$route.path,
+            (newVal, lodVal) => {
+                // console.log(lodVal)
+                // console.log(newVal)
+                if (newVal === '/') {
+                    this.ifValue = false
+                } else {
+                    this.ifValue = true
+                }
+            }
+        )
+    }
+}
+</script>
+```
+
+### 组合式
+```vue
+<script setup>
+    import { watch,ref,reactive} from 'vue';
+    import {useRouter,useRoute,onBeforeRouteUpdate} from 'vue-router'
+
+    const router=useRouter();
+
+        //获取路由的参数
+    console.log(router.currentRoute.value.path)
+    
+    const ifValue=ref('')
+    //侦听器 watch 函数在每次响应式状态发生变化时触发回调函数
+    watch(()=>router.currentRoute.value.path,async (newValue,oldValue)=>{
+            
+     // console.log(oldValue)之前的路径信息
+    console.log(newValue)//现在的路径信息
+            
+    if(newValue==='/'){
+        ifValue.value=false
+                
+    }else{
+        ifValue.value=true
+    }
+        console.log(ifValue.value)
+    })
+        
+</script>
+```
diff --git "a/49\350\223\235\346\226\207\351\276\231/2023-04-25 children\345\265\214\345\245\227\350\267\257\347\224\261.md" "b/49\350\223\235\346\226\207\351\276\231/2023-04-25 children\345\265\214\345\245\227\350\267\257\347\224\261.md"
new file mode 100644
index 0000000000000000000000000000000000000000..67f8f623d8e8fc5d73e4bf77638753b2f4d94ff5
--- /dev/null
+++ "b/49\350\223\235\346\226\207\351\276\231/2023-04-25 children\345\265\214\345\245\227\350\267\257\347\224\261.md"	
@@ -0,0 +1,33 @@
+
+#
+## 使用方式
+
++ 在自己的路由配置文件里面创建对应的路由
+
++ 子路由需要在 父路由 对应的参数中使用 **children** 配置；
+
++ 切记，在children 中，子路由的路径不要加 / ；
+```js
+
+//定义路由
+const routes=[
+    {path:'/',component:Home},
+    {
+        path:'/about',
+        component:About,
+        //嵌套路由
+        children:[
+            {
+                //当 /about/:id 是匹配成功
+                //(\\d+)自能为数字
+                path:':id(\\d+)',
+                // AboutId 将被渲染到 About 的 RouterView 内部
+                component:AboutId
+            }
+        ]
+    },
+    {path:'/student',component:Student},
+    {path:'/student/:id(\\d+)',component:StudentId},
+    {path:'/:pathMatch*',component:NotFund}
+]
+```
\ No newline at end of file
diff --git "a/49\350\223\235\346\226\207\351\276\231/2023-04-27 \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252 components\345\221\275\345\220\215\350\247\206\345\233\276.md" "b/49\350\223\235\346\226\207\351\276\231/2023-04-27 \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252 components\345\221\275\345\220\215\350\247\206\345\233\276.md"
new file mode 100644
index 0000000000000000000000000000000000000000..907d49038d98397ff297350a9452a25e6f15cec4
--- /dev/null
+++ "b/49\350\223\235\346\226\207\351\276\231/2023-04-27 \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252 components\345\221\275\345\220\215\350\247\206\345\233\276.md"	
@@ -0,0 +1,184 @@
+# 编程式导航和components 命名视图
+
+#
+## 一.编程式导航
+
++ 编程式导航就是以编写代码的形式，实现 RouterLink 创建 a 标签定义导航链接的作用
+
+#
+### 导航到指定的url
+
++ 选项式的使用
+    
+    + 使用 **this.$router.push** 方法实现导航到指定的url
+
+    + **this.$router.push** 方法会向 history 栈添加一个新的记录，当点击浏览器后退按钮时，会回到之前的 URL。
+
+```vue
+<script>
+export default{
+    data(){
+        return{
+            id:''
+        }
+    },
+    methods:{
+        fn(){
+            //会跳转到 路径为/users/11的页面
+            // this.$router.push('/users/11')
+
+            //会跳转到 路径为/users/id的页面
+            // this.$router.push({path:`/users/${this.id}`})
+
+            //name:'' ：表示已命名的路由
+            //params:加上参数，建立url
+            this.$router.push({name:'usersId',params:{id:this.id}})
+        },
+    }
+}
+</script>
+```
+
++ 组合式的使用
+
+    + 导入 **useRouter** 方法，并实例化
+
+    + 使用 **router.push** 方法实现导航到指定的url
+```vue
+<script setup>
+import {useRouter} from 'vue-router'
+
+const router=useRouter()
+
+const fn=function(){
+    router.push('/users/11')
+}
+</script>
+```
+
++ 一些方法的使用
+
+    + 在 **{}** ，使用 **path** 时， **params** 会被忽略
+
+    + **params** 可以与 name (命名的路由)一起使用
+```js
+// 字符串路径
+router.push('/users/eduardo')
+
+// 带有路径的对象
+router.push({ path: '/users/eduardo' })
+
+// 命名的路由，并加上参数，让路由建立 url
+router.push({ name: 'user', params: { username: 'eduardo' } })
+
+// 带查询参数，结果是 /register?plan=private
+router.push({ path: '/register', query: { plan: 'private' } })
+
+// 带 hash，结果是 /about#team
+router.push({ path: '/about', hash: '#team' })
+
+```
+
+#
+### 不添加历史记录: router.replace({})
+
+```
+    1. 作用与 router.push 类似，唯一的不同是， router.push 在导航时会向 history 添加新的历史记录，而 router.replace 不会
+
+    2. router.push 转换为 router.replace 的方法是: 添加一个 replace:true 属性
+```
+```js
+    router.push({ path: '/home', replace: true })
+    // 相当于
+    router.replace({ path: '/home' })
+
+```
+
+#
+### 横跨历史记录 :router.go
+
++ router.go(n) 方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步
+```js
+// 向前移动一条记录，与 router.forward() 相同
+router.go(1)
+
+// 返回一条记录，与 router.back() 相同
+router.go(-1)
+
+// 前进 3 条记录
+router.go(3)
+
+// 如果没有那么多记录，静默失败
+router.go(-100)
+router.go(100)
+```
+
+#
+## components 命名视图
+
++ 一个视图使用一个组件渲染，对于同个路由，多个视图就需要多个组件。为了保证各组件的正确使用，在配置路由时，使用了 **components)** 配置(比原来多了个s)
+
+#
+### 单命名视图
+```js
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      components: {
+        default: Home,
+        // UserId: UserId 的缩写
+        UserId,
+        // 它们与 `<RouterView>` 上的 `name` 属性匹配
+        About,
+      },
+    },
+  ],
+})
+```
+
+#
+### 嵌套命名路由
+
++ 在 children 中 使用 components 配置
+```html
+<div>
+        这是主页
+        <br>
+        <Nav></Nav>
+        <br>
+        <div>
+            <RouterView name="About"></RouterView>
+            <RouterView></RouterView>
+            <RouterView name="UserId"></RouterView>
+        </div>
+
+    </div>
+```
+```js
+const routes = [
+    {
+        path: '/',
+        component: Home,
+        children: [
+            {
+                path:'/emails',
+                component:Emails
+            },{
+                path:'/user',
+                components:{
+                    default:User,
+                    //相当于 UserId :UserId
+                    UserId,
+                    //与 RouterView 的name 对应
+                    About
+                }
+            }
+        ]
+    }, {
+        path: '/:pathWatch(.*)*',
+        component: NotFund
+    }
+]
+```
\ No newline at end of file
diff --git "a/49\350\223\235\346\226\207\351\276\231/2023-04-28 element-plus\344\275\277\347\224\250.md" "b/49\350\223\235\346\226\207\351\276\231/2023-04-28 element-plus\344\275\277\347\224\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..81bc2c2093844d2028f371de9ab746c88d885ab7
--- /dev/null
+++ "b/49\350\223\235\346\226\207\351\276\231/2023-04-28 element-plus\344\275\277\347\224\250.md"	
@@ -0,0 +1,32 @@
+# element-plus 的使用
+
+官方文档: https://element-plus.gitee.io/zh-CN/
+
+#
+## 一.安装 element-plus 包管理器
+```js
+// yarn
+     yarn add element-plus
+
+// npm
+    npm install element-plus --save
+
+// pnpm
+    pnpm install element-plus
+```
+
+#
+## 二.全局引入配置
+
++ 在 main.js 文件中配置
+```js
+//导入 element-pius 和相关文件
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+const app=createApp(app)
+//全局配置
+app.use(ElementPlus)
+
+app.mount('#app')
+```
\ No newline at end of file