diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md"
index b29e1d818fab48e0057b97971078a78359f8f0ca..50ace09e81d3936783595ae51413bb249ee864a5 100644
--- "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md"	
+++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.09\357\274\210Vue Lci\357\274\211.md"	
@@ -13,4 +13,58 @@
 ```
 // host 文件位置
 C:\Windows\System32\drivers\etc
-```
\ No newline at end of file
+```
+
+1. 父传子有哪些方式
+```
+用props传值
+```
+2. 子传父有哪些方式
+```
+通过$emit触发自定义事件
+```
+3. 如何让 CSS 只在当前组件中起作用
+```
+利用scoped来限制
+```
+4. keep-alive 的作用是什么
+```
+​保留组件状态，避免组件重新渲染
+```
+5. vue中如何获取DOM
+```
+​ $refs属性
+```
+6. 请说出 Vue CLI 项目中src目录每个文件夹的文件的用法​assets：放静态资源
+```
+​ components：放组件
+
+​ router：定义路由相关配置
+
+​ view：视图
+
+​ app.vue：主组件
+
+​ main.js：入口文件
+```
+7. 单页面应用的优缺点​ 优点：
+```
+前后端分离开发，提高开发效率
+
+业务场景切换时，局部更新结构
+
+用户体验好，更加接近本地应用
+```
+8. 缺点：
+```
+不利于SEO 首次加载速度较慢 页面复杂度较高 router和route的区别
+
+router为VueRouter的实例，常用router.push方法来导航到不同URL
+
+$route为当前router跳转对象，可以获取name、path、params等属性
+
+怎么定义 vue-router 的动态路由? 怎么获取传过来的值？ 将路径中的某个部分使用':'标记，即可设置为动态路由
+
+通过$route.params来获取值
+```
+9. vue-router有几种模式，分别是什么 两种模式，分别为hash模式和history模式
\ No newline at end of file
diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.11\357\274\210Vue CLI \351\203\250\347\275\262\345\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.11\357\274\210Vue CLI \351\203\250\347\275\262\345\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md"
index 26eb9ff07d80890ba2c451519017a214d51ba8ce..285ce5831dcb26a433ecc4499857a98576faf1c7 100644
--- "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.11\357\274\210Vue CLI \351\203\250\347\275\262\345\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md"	
+++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.11\357\274\210Vue CLI \351\203\250\347\275\262\345\210\260\346\234\215\345\212\241\345\231\250\357\274\211.md"	
@@ -32,6 +32,8 @@ vue create myVueProject  // 你的要创建Vue项目
 
 cd myVueProject // 进入你的项目文件夹
 
+yarn add vue-router // 安装vue-router
+
 yarn serve // 启动你的vue项目
 
 yarn build // 打包你的项目，文件会保存到dist文件夹里面
diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue\350\267\257\347\224\261 \357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue\350\267\257\347\224\261 \357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e1665c84736b57e7c29e8dfdc591acd5178fc347
--- /dev/null
+++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.15\357\274\210Vue\350\267\257\347\224\261 \357\274\211.md"	
@@ -0,0 +1,30 @@
+## Vue 路由
+
+1. yarn 安装 vue-router
+
++ 安装命令
+```
+yarn add vue-router
+```
+
+2. mian.js 引用并注册路由
+```
+// 引用路由
+import VueRouter from "vue-router"
+// 引用vue文件
+import Show from "./components/Show"
+
+// 路由配置
+let router =  new VueRouter({
+  mode:"history",
+  routes:[
+    {
+      path:"/show",
+      component:Show
+    }
+  ]
+})
+
+// 注册路由
+Vue.use(VueRouter)
+```
diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215\343\200\201\345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215\343\200\201\345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1159ce17d17445e890eb05918c8962c123be922b
--- /dev/null
+++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue \345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215\343\200\201\345\265\214\345\245\227\350\267\257\347\224\261\357\274\211.md"	
@@ -0,0 +1,91 @@
+## Vue Router起步
+
++ 单页面应用(SPA)的核心之一是:更新视图而不重新请求页面;
+
++ vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式。
+
+1. hash模式
+
+url hash 就是类似于：
+```
+http://www.xxx.com/#/login
+```
+
+监听hashchange
+```
+function matchAndUpdate () {
+   // todo 匹配 hash 做 dom 更新操作
+}
+
+window.addEventListener('hashchange', matchAndUpdate)
+```
+
+2. history 模式
+
+```
+function matchAndUpdate () {
+   // todo 匹配路径 做 dom 更新操作
+}
+
+window.addEventListener('popstate', matchAndUpdate)
+```
+### 动态路由匹配
+
++ vue-router 的路由路径中使用过 dynamic segment 来达到这个效果
+```
+const User = {
+  template: '<div>User</div>'
+}
+
+const router = new VueRouter({
+  routes: [
+    // 动态路径参数 以冒号开头
+    { path: '/user/:id', component: User }
+  ]
+})
+```
+像 /user/foo 和 /user/bar 都将映射到相同的路由。
+
+```
+const User = {
+  template: '<div>User {{ $route.params.id }}</div>'
+}
+```
+1. 前端渲染
+```
+// vue组件页面配置
+<template>
+    <div>
+        <!-- 随地址栏id改变而改变，id也可以用别的名称，但是对应的路由名称要改变 -->
+        <h1> {{ $route.params.id }}</h1> // 渲染id
+    </div>
+</template>
+```
+
+2. 后端打印
+```
+<script>
+export default {
+    mounted:function() {
+        // 后端打印id字段
+        console.log(this.$route.params.id);
+    }
+}
+</script>
+```
+
+### 404 Not Found Rount
+
+添加path地址为*的路由
+```
+// 路由配置
+let router =  new VueRouter({
+  mode:"history",
+  routes:[
+    {
+      path:"*", // *为通配符
+      component:Vue文件地址
+    }
+  ]
+})
+```
diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..3ce897a4aee107843b25c6f475bbd65a78431570
--- /dev/null
+++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.18\357\274\210Vue \347\274\226\347\250\213\345\274\217\345\257\274\350\210\252\357\274\211.md"	
@@ -0,0 +1,22 @@
+# 编程式导航
+
+1. Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push
+```
+// 字符串
+this.$router.push('home')
+```
+```
+// 对像
+router.push({ path: 'home' })
+```
+```
+// 命名路由   
+router.push({ name: 'user', params: { userId: '123' } })
+```
+```
+// 带 query 参数, 最终结果 /register?plan=private
+router.push({ path: 'register', query: { plan: 'private' } })
+```
+
+2. router.replace(location)
+注意：跟 router.push 很像，唯一不同是，不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
\ No newline at end of file
diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.19\357\274\210Vue \345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.19\357\274\210Vue \345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215\357\274\211.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f32f0963ab4537eabe4c0fb39768eda097531cdc
--- /dev/null
+++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.19\357\274\210Vue \345\221\275\345\220\215\350\247\206\345\233\276\343\200\201\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215\357\274\211.md"	
@@ -0,0 +1,92 @@
+# 命名路由
+
+优点：当地址过长时，使用一个名称来标识一个路由会显得尤其方便
+
+1. 在routers配置路由的时候给路由取个名
+```
+App.Vue
+
+<template>
+  <div id="app">
+    <h1>
+      <router-link to="good">good nice</router-link>
+      <hr>
+      <router-link :to="{name: 'user', params: { id: 3000 }}">这是是操作user</router-link>     
+    </h1>
+    <router-view></router-view>
+  </div>
+</template>
+```
+```
+main.js
+let router = new VueRouter({
+  mode:'history',
+  routes:[
+    {
+      path:'/user/:id',
+      name:'user',
+      component:User,
+    }
+  ]
+})
+```
+
+# 命名视图
+
+1. 给不同的router-view定义不同的名字，通过名字进行对应组件的渲染
+
+2. 由/所在的页面，也就是app.vue，我们第一个router-view不命名就使用默认的，其它两个router-view添加name属性命名
+
+```
+import VueRouter from 'vue-router'
+
+import User from './components/User'
+import Login from './components/Login'
+// import Reg from './components/Reg'
+
+
+Vue.config.productionTip = false
+
+Vue.use(VueRouter)
+
+let router = new VueRouter({
+  routes: [
+    {
+      path: '/user',
+      name:'/',
+      components: {
+        user:User,
+        login:Login,
+      }
+    }
+  ]
+})
+```
+```
+    <router-view></router-view>   //空的
+    <router-view name="login"></router-view>  //登录页
+```
+
+# 重定向和别名
+
+## 重定向
+
+1 . 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
+
+```
+const router = new VueRouter({
+  routes: [
+    { path: '/a', redirect: '/b' }
+  ]
+})
+```
+
+2. 重定向的目标也可以是一个命名的路由：
+
+```
+const router = new VueRouter({
+  routes: [
+    { path: '/a', redirect: { name: 'foo' }}
+  ]
+})
+```