diff --git "a/\345\274\240\346\236\227\347\272\242/2021-6-15(\346\263\250\345\206\214\350\267\257\347\224\261).md" "b/\345\274\240\346\236\227\347\272\242/2021-6-15(\346\263\250\345\206\214\350\267\257\347\224\261).md"
new file mode 100644
index 0000000000000000000000000000000000000000..563bbe10a9db0abd457a5640524c1360ff3da83d
--- /dev/null
+++ "b/\345\274\240\346\236\227\347\272\242/2021-6-15(\346\263\250\345\206\214\350\267\257\347\224\261).md"
@@ -0,0 +1,70 @@
+# 注册路由
+## 1.先下载路由依赖`yarn add vue-router`
+## 2.在main.js写上需要注册的路由
+```
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from 'vue-router'    //引入路由
+import Login from './components/Login.vue';   //引入组件
+
+Vue.use(VueRouter); //Vue.use加入(引入的路由)
+
+var routes = new VueRouter({    //实例化路由
+  mode:'history',
+  routes: [
+    {
+      path: '/login',    //注册的路由
+      component: Login   //注册的路由显示的组件
+    }
+  ]
+})
+
+
+Vue.config.productionTip = false
+
+
+new Vue({
+  router: routes,   //注册该路由(如果实例化路由为router，则这可以直接简写为router)
+  render: h => h(App),
+}).$mount('#app')
+
+```
+## 在App.vue里面使用该路由
+```
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png" />
+
+    <Test></Test>
+
+    <!-- 渲染成一个跳转的a链接（可有可无，相当于a链接） -->
+    <router-link to="/Login">跳转到登陆页</router-link>
+    <!-- 路由出口 -->
+    <!-- 路由匹配到的组件将渲染在这里(这个必须有，否则跳转没有效果) -->
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import Test from "./components/Test";
+
+export default {
+  name: "App",
+  components: {
+    Test,
+  },
+};
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
+
+```
diff --git "a/\345\274\240\346\236\227\347\272\242/2021-6-16(vueCli\345\212\250\346\200\201\350\267\257\347\224\261).md" "b/\345\274\240\346\236\227\347\272\242/2021-6-16(vueCli\345\212\250\346\200\201\350\267\257\347\224\261).md"
new file mode 100644
index 0000000000000000000000000000000000000000..98ef62befe4fce55cb8a25679920510761a58457
--- /dev/null
+++ "b/\345\274\240\346\236\227\347\272\242/2021-6-16(vueCli\345\212\250\346\200\201\350\267\257\347\224\261).md"
@@ -0,0 +1,74 @@
+# 动态路由
+
+## 可以获取动态路由的参数
+```
+<template>
+    <div>
+        <!-- $route.params.id  获取路由 如(127.0.0.1/User/:id)中的id -->
+        <h1>普通用户：{{$route.params.id}}</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            
+        }
+    },
+    mounted(){
+       // http://localhost:8081/user/3?id=3
+        console.log(this.$route.params.id); // 获取路由里面的/3参数  打印出来就是路由的参数 3
+        console.log(this.$route.query);     //获取路由里面的?id=3  打印出来是个对象{id: "3"}
+    }
+}
+</script>
+```
+### 可以借助这来实现用id跳转页面
+
+
+# 通配符 `*`
+## 该符号可以用于防止用户跳往非我们定义的路由
+## 给除了我们定义的路由以外都统一跳转到一个组件里 如(404组件)
+```
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from 'vue-router'
+
+import Login from './components/Login'
+import User from './components/User'
+import ErrorView from './components/Error'
+
+Vue.config.productionTip = false
+Vue.use(VueRouter);
+
+var router = new VueRouter({
+  mode:'history',
+  routes:[
+    {
+      path:'/login',       // 注册路由
+      component:Login
+    },
+    {
+      path:'/user/:id',     // 注册动态路由 路由传参数
+      component:User
+    },
+    {   
+      path:'*',     //给除了自己注册的路由以外，其它所有的路由都跳转到ErrorView组件
+      component:ErrorView
+    },
+  ]
+});
+
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
+
+```
+### 会匹配所有路径
+ ` path: '*'`
+## 会匹配以 `/user-` 开头的任意路径
+ ` path: '/user-*'`
+
diff --git "a/\345\274\240\346\236\227\347\272\242/2021-6-18(vue\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252,\345\221\275\345\220\215\350\267\257\347\224\261).md" "b/\345\274\240\346\236\227\347\272\242/2021-6-18(vue\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252,\345\221\275\345\220\215\350\267\257\347\224\261).md"
new file mode 100644
index 0000000000000000000000000000000000000000..95fe030d15e675287cca2b3e78db29b39290b9b3
--- /dev/null
+++ "b/\345\274\240\346\236\227\347\272\242/2021-6-18(vue\347\274\226\347\250\213\345\274\217\345\257\274\350\210\252,\345\221\275\345\220\215\350\267\257\347\224\261).md"
@@ -0,0 +1,119 @@
+# 编程式导航
+## 编程式导航就是在后端写的跳转方法，前端跳转是用`<router-link :to="...">`,而编程式导航则在后端用`this.$router.push(...)`
+```
+<template>
+    <div>
+        <label for="" id="text">{{text}}</label>
+        <router-link to="/login">前往登录</router-link>     //前端跳转
+    </div>
+</template>
+
+
+<script>
+export default {
+    data(){
+        return {
+            text:'这是首页呀！登录点下面按钮'
+        }
+    },
+    mounted(){
+        if(this.$router.to !== '/login'){   如果不是登录页的话
+          setTimeout(() => {
+            this.$router.push('login')  延时2秒后端跳转到登录页
+        }, 2000);
+        }
+    }
+}
+</script>
+
+
+<style>
+#text{
+    background-color: pink;
+}
+</style>
+```
+## 带参数的路由
+```
+    mounted(){
+        if(this.$router.to !== '/login'){
+          setTimeout(() => {
+            this.$router.push({path:'/user',query:{username:'xiaopang'}})
+        }, 3000);
+        }
+    }
+```
+## 声明式导航`<router-link :to="..."></router-link>`，前端写跳转
+## 编程式导航`this.$router.push(...)`,后端写跳转
+
+# 命名路由
+## 给路由用name命名，跳转的时候可以直接用命名来代替路由名称
+### 路由文件
+```
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from 'vue-router'
+
+
+import Login from './components/Login.vue'
+import User from './components/User'
+
+Vue.config.productionTip = false;
+Vue.use(VueRouter);
+
+var router = new VueRouter({
+  mode:'history',
+  routes:[
+    {
+      path:'/login',
+      component:Login
+    },
+    {
+      path:'/user/:userId',     //该:userId为参数，要与:to="{name:'user',params:{userId:123}}中的userId相同
+      name:'user',      //命名路由
+      component:User
+    }
+  ]
+});
+
+new Vue({
+  router:router,
+  render: h => h(App),
+}).$mount('#app')
+
+```
+### 首页文件
+```
+<template>
+    <div>
+        <label for="" id="text">{{text}}</label>
+        <router-link :to="{name:'user',params:{userId:123}}">前往登录</router-link>     //name:'user'为命名的路由,会跳转到该路由(声明式路由)
+    </div>
+</template>
+
+
+<script>
+export default {
+    data(){
+        return {
+            text:'这是首页呀！登录点下面按钮'
+        }
+    },
+    mounted(){
+        // var userId = 33;
+        if(this.$router.to !== '/login'){
+          setTimeout(() => {
+            this.$router.push({name:'user',params:{userId:123}})    //name:'user'为命名的路由,会跳转到该路由(编程式路由)
+        }, 3000);
+        }
+    }
+}
+</script>
+
+
+<style>
+#text{
+    background-color: pink;
+}
+</style>
+```
\ No newline at end of file
diff --git "a/\345\274\240\346\236\227\347\272\242/2021-6-19(vue\345\221\275\345\220\215\347\273\204\344\273\266,\345\265\214\345\245\227\347\273\204\344\273\266).md" "b/\345\274\240\346\236\227\347\272\242/2021-6-19(vue\345\221\275\345\220\215\347\273\204\344\273\266,\345\265\214\345\245\227\347\273\204\344\273\266).md"
new file mode 100644
index 0000000000000000000000000000000000000000..4f586e61fc3982361d65ab53bea0dcb71009f57f
--- /dev/null
+++ "b/\345\274\240\346\236\227\347\272\242/2021-6-19(vue\345\221\275\345\220\215\347\273\204\344\273\266,\345\265\214\345\245\227\347\273\204\344\273\266).md"
@@ -0,0 +1,159 @@
+# 命名视图
+## 和命名路由差不多，给视图名一个名字，在用的时候可以方便使用
+```
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+import User from './components/User'
+import Login from './components/Login';
+import Register from './components/Register';
+
+Vue.config.productionTip = false
+Vue.use(VueRouter)
+
+var router = new VueRouter({
+    mode:'history',
+    routes:[
+      {
+        path:'/user',
+        name:'user',
+        components:{
+          user : User,    // user 为 User的命名
+          login: Login,
+          register: Register
+        }
+      }
+    ]
+})
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
+```
+### 使用
+```
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png" />
+    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
+    
+    <router-link to="user">点击我跳转</router-link>
+    <router-view name="register"></router-view>     // name="register" 中的register 必须与路由的命名一致
+    <router-view name="user"></router-view>
+  </div>
+</template>
+
+<script>
+// import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: "App",
+  components: {
+    // HelloWorld
+  },
+};
+</script>
+
+<style>
+</style>
+
+```
+
+# 嵌套组件
+## 组件通过<router-view></router-view>路由组件出口进行多层嵌套
+
+### 路由文件 
+```
+import Vue from 'vue'
+import App from './App.vue'
+
+import VueRouter from 'vue-router'
+
+import User from './components/User'
+import Login from './components/Login'
+import Register from './components/Register'
+import Personal from './components/Personal'
+
+Vue.config.productionTip = false
+Vue.use(VueRouter)
+
+var router = new VueRouter({
+    mode:'history',
+    routes:[
+      {
+        path:'/user',   // 父路由，/user
+        component:User,
+        children:[    // 子路由，或子组件，常用于嵌套
+          {
+            path:'login',   // /user中的子路由，/user/login 
+            component:Login   // /user中的子组件，显示Login和User组件
+          },
+          {
+            path:'register',    // /user中的子路由，/user/register 
+            components:{    //多个组件或要加s复数
+              register : Register,  // /user中的子组件，显示Register和Personal组件还有User组件
+              personal: Personal
+            }
+          }
+        ]
+      }
+    ]
+})
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
+
+```
+### app.vue
+```
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png" />
+
+    <router-link to="user">点击我跳转</router-link>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App",
+  components: {
+
+  },
+};
+</script>
+
+<style>
+</style>
+
+```
+## /user 路由
+![](./img/2021-06-19_1.png)
+
+
+### user.vue
+```
+<template>
+<div>
+    <div>
+    <h1>这是用户界面呀</h1>
+        <router-view></router-view>   // 默认组件出口
+        <router-view name="register"></router-view>   // 命名组件的出口
+        <router-view name="personal"></router-view>   // 命名组件的出口
+  </div>
+
+</div>
+
+</template>
+```
+### 这个时候/user会有两种匹配结果：1./user/login  2./user/register
+## 1. /user/login 路由
+![](./img/2021-06-19_2.png)
+## 2./user/register
+![](./img/2021-06-19_3.png)