diff --git "a/\346\275\230\351\207\221\351\223\216/2021-6-16.md" "b/\346\275\230\351\207\221\351\223\216/2021-6-16.md"
new file mode 100644
index 0000000000000000000000000000000000000000..058db5a53deb9ac905be50257e870ee211e0c47c
--- /dev/null
+++ "b/\346\275\230\351\207\221\351\223\216/2021-6-16.md"
@@ -0,0 +1,56 @@
+# 路由
+## 安装依赖
+先安装router依赖
+```
+yarn add vue-router
+```
+引入router依赖 
+```
+import VueRouter from 'vue-router'
+```
+使用router依赖
+```
+vue.use('VueRouter')
+```
+## 使用路由
+引入路由文件
+```
+import Test from './components/Test'
+```
+初始化VueRouter，声明所需路由
+```
+let router=new VueRouter({
+  mode:'history',
+  routes:[
+    {
+      path:'/Test',
+      component:Test,
+    }
+  ]
+}
+```
+接着在new vue 中使用router即可，router为缩写，完整的应该是router:routes
+
+在app.vue中写下 `<router-view></router-view>` 即可使用路由文件
+
+在path后写下 `/:id` 后可以在路由文件中通过 `{{$route.params.id}}` 获取地址栏中的数据
+
+# 镶嵌路由
+在初始化路由时在加入一个键值对 `children` ,其余操作可路由一样，作用在与可以在原路由基础上再添加一个路由
+```
+let router=new VueRouter({
+  mode:'history',
+  routes:[
+    {
+      path:'/Test/:id',
+      component:Test,
+      children:[
+        {
+          path:'p404',
+          component:p404
+        }
+      ]
+    }
+  ]
+})
+```
\ No newline at end of file
diff --git "a/\346\275\230\351\207\221\351\223\216/2021-6-18.md" "b/\346\275\230\351\207\221\351\223\216/2021-6-18.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d3b6312d4a414b9b2a9ca7eac45f1b0dbc0d2efb
--- /dev/null
+++ "b/\346\275\230\351\207\221\351\223\216/2021-6-18.md"
@@ -0,0 +1,25 @@
+# 编程式导航
+首先定义路由
+
+在app页面写如导航
+```
+mounted: function () {
+    setTimeout(() => {
+        this.$router.push({
+          path: "login",
+          query: {
+            name: "登录",
+          },
+        });
+    }, 2000);
+  },
+```
+`query` 和 `params`都是给导航页面传参数 不同的是query传的参数可以在搜素栏中显示出来
+
+当在导航的页面是原来的页面时会出现导航冗余的情况，解决方法为在路由页面中，  `Vue.use(VueRouter);`后写入
+```
+const or=VueRouter.prototype.push;
+VueRouter.prototype.push=function push(location){
+  return or.call(this,location).catch(err=>err)
+}
+```
\ No newline at end of file
diff --git "a/\346\275\230\351\207\221\351\223\216/2021-6-19.md" "b/\346\275\230\351\207\221\351\223\216/2021-6-19.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5cb43f267937062fd0009646adec3a0ab07fb753
--- /dev/null
+++ "b/\346\275\230\351\207\221\351\223\216/2021-6-19.md"
@@ -0,0 +1,51 @@
+# 命名路由
+有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
+
+在定义路由后，添加一个name键值对，给路由命名，命名的使用方法为
+```
+    <router-link :to="{name:'user',query :{userid:113}}">user</router-link>
+```
+# 命名视图
+当需要一个路由展示多个视图时使用此方法
+
+在 `components` 对象中给多个视图命名，在使用时需要多个 `router-view`,并且给其命名相应的名字以显示视图
+```
+  routes:[{
+    path:'/user',
+    components:{
+      users:User
+    }
+
+
+    <router-view name="users"></router-view>
+
+```
+# 嵌套命名视图
+在视图中使用视图
+
+在嵌套路由中使用命名视图，然后在相应的视图中定义出口
+```
+let router=new VueRouter({
+  mode:"history",
+  routes:[{
+    path:'/user',
+    name:'users',
+    component:User,
+    children:[
+      {
+        path:'login',
+        name:'login',
+        components:{
+          logins:Login,
+          registry:Registry
+        }
+      }
+    ]
+  }]
+})
+```
+这个嵌套视图的出口在User视图下
+```
+    <router-view name="registry"></router-view>
+    <router-view name="logins"></router-view>
+```
\ No newline at end of file