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 Vue Router\350\265\267\346\255\245\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.16\357\274\210Vue Vue Router\350\265\267\346\255\245\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 Vue Router\350\265\267\346\255\245\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 \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.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\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.18\357\274\210Vue \345\265\214\345\245\227\350\267\257\347\224\261\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' }}
+  ]
+})
+```
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