From 5b26758e18823faa25821071b03f9db283725ae4 Mon Sep 17 00:00:00 2001
From: YH <2543387770@qq.com>
Date: Wed, 16 Jun 2021 17:29:42 +0800
Subject: [PATCH 1/4] =?UTF-8?q?Vue=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../6.15 Vue\350\267\257\347\224\261.md"      | 40 ++++++++++
 ...14\345\245\227\350\267\257\347\224\261.md" | 78 +++++++++++++++++++
 2 files changed, 118 insertions(+)
 create mode 100644 "\351\273\204\345\256\207\347\205\214/6.15 Vue\350\267\257\347\224\261.md"
 create mode 100644 "\351\273\204\345\256\207\347\205\214/6.16 Vue\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.md"

diff --git "a/\351\273\204\345\256\207\347\205\214/6.15 Vue\350\267\257\347\224\261.md" "b/\351\273\204\345\256\207\347\205\214/6.15 Vue\350\267\257\347\224\261.md"
new file mode 100644
index 0000000..b95207f
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.15 Vue\350\267\257\347\224\261.md"	
@@ -0,0 +1,40 @@
+# Vue路由
+
+yarn 安装 vue-router
+
+```
+// 安装命令
+yarn add vue-router
+```
+
+## 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)
+```
+
+## App.vue 配置
+
+```
+// 跳转
+<router-link to="跳转位置">点击跳转</router-link>
+
+// 展示vue组件
+<router-view></router-view>
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\256\207\347\205\214/6.16 Vue\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.md" "b/\351\273\204\345\256\207\347\205\214/6.16 Vue\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.md"
new file mode 100644
index 0000000..8a07a80
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.16 Vue\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.md"	
@@ -0,0 +1,78 @@
+# Vue动态路由匹配、嵌套路由
+
+## 动态路由匹配
+
+```
+// 路由配置
+let router =  new VueRouter({
+  mode:"history",
+  routes:[
+    {
+      path:"/show/:id", // id名称可改，和vue组件配置的id相对应
+      component:Show
+    }
+  ]
+})
+```
+
+前端渲染
+```
+// vue组件页面配置
+<template>
+    <div>
+        <!-- 随地址栏id改变而改变，id也可以用别的名称，但是对应的路由名称要改变 -->
+        <h1> {{ $route.params.id }}</h1> // 渲染id
+    </div>
+</template>
+```
+
+后端打印
+```
+<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文件地址
+    }
+  ]
+})
+```
+
+## 嵌套路由
+
+```
+let router =  new VueRouter({
+  mode:"history",
+  routes:[
+    {
+      path:"/show",
+      component:主Vue文件,
+      children:[
+        {
+          path:"newshow", // 这里前面不需要`/`
+          component:嵌入Vue子文件
+        },
+      ]
+    }
+  ]
+})
+```
+
+注意：需要嵌套路由需要在Vue主文件添加 `<router-view></router-view>` ,否则Vue子文件无法渲染。
\ No newline at end of file
-- 
Gitee


From ef3852c363ddca5310d30296d20d52f84c9c0d06 Mon Sep 17 00:00:00 2001
From: YH <2543387770@qq.com>
Date: Fri, 18 Jun 2021 11:24:58 +0800
Subject: [PATCH 2/4] =?UTF-8?q?Vue=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...17\345\214\226\345\257\274\350\210\252.md" | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 "\351\273\204\345\256\207\347\205\214/6.18 Vue\347\250\213\345\272\217\345\214\226\345\257\274\350\210\252.md"

diff --git "a/\351\273\204\345\256\207\347\205\214/6.18 Vue\347\250\213\345\272\217\345\214\226\345\257\274\350\210\252.md" "b/\351\273\204\345\256\207\347\205\214/6.18 Vue\347\250\213\345\272\217\345\214\226\345\257\274\350\210\252.md"
new file mode 100644
index 0000000..3760644
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.18 Vue\347\250\213\345\272\217\345\214\226\345\257\274\350\210\252.md"	
@@ -0,0 +1,37 @@
+# 程序化导航
+
+<span style="background-color:lightgrey;font-size:2rem">router.push(location, onComplete?, onAbort?)<span>
+
+注意：在 Vue 实例内部，您可以以$router. 因此，您可以调用this.$router.push.
+
+要导航到不同的 URL，请使用router.push. 此方法将一个新条目推送到历史堆栈中，因此当用户单击浏览器后退按钮时，他们将被带到上一个 URL。
+
+
+## 示例
+
+```
+// 文本字符串路径
+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' } })
+```
+
+**注意:params如果path提供了 a ，则将被忽略，而 则不是query，如上例所示。相反，您需要提供name路由的 或path使用任何参数手动指定整体：**
+
+```
+const userId = '123'
+router.push({ name: 'user', params: { userId } }) // 跳转到-> /user/123
+router.push({ path: `/user/${userId}` }) // 跳转到 -> /user/123
+// 这个只能跳转到/user,params被忽略了
+router.push({ path: '/user', params: { userId } }) // 跳转到 -> /user
+```
+相同的规则适用于组件的to属性router-link。
+
+**注意：如果目的地与当前路线相同，并且只有参数发生变化（例如从一个配置文件到另一个配置文件/users/1-> /users/2），您将不得不使用beforeRouteUpdate对更改做出反应（例如获取用户信息）。**
-- 
Gitee


From f3715904e9adedc6d27beca1c45eb49b1ad1980c Mon Sep 17 00:00:00 2001
From: YH <2543387770@qq.com>
Date: Fri, 18 Jun 2021 11:40:12 +0800
Subject: [PATCH 3/4] =?UTF-8?q?Vue=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...50\213\345\272\217\345\214\226\345\257\274\350\210\252.md" | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git "a/\351\273\204\345\256\207\347\205\214/6.18 Vue\347\250\213\345\272\217\345\214\226\345\257\274\350\210\252.md" "b/\351\273\204\345\256\207\347\205\214/6.18 Vue\347\250\213\345\272\217\345\214\226\345\257\274\350\210\252.md"
index 3760644..71f4512 100644
--- "a/\351\273\204\345\256\207\347\205\214/6.18 Vue\347\250\213\345\272\217\345\214\226\345\257\274\350\210\252.md"	
+++ "b/\351\273\204\345\256\207\347\205\214/6.18 Vue\347\250\213\345\272\217\345\214\226\345\257\274\350\210\252.md"	
@@ -1,6 +1,6 @@
 # 程序化导航
 
-<span style="background-color:lightgrey;font-size:2rem">router.push(location, onComplete?, onAbort?)<span>
+**<font size=5>router.push(location, onComplete?, onAbort?)</font>**
 
 注意：在 Vue 实例内部，您可以以$router. 因此，您可以调用this.$router.push.
 
@@ -16,7 +16,7 @@ router.push('home')
 // 对象
 router.push({ path: 'home' })
 
-// 命名路由
+// 命名路由 要params可以使用，path不能写死，正确path /user/:userId
 router.push({ name: 'user', params: { userId: '123' } })
 
 // 带query查询，结果是/register？plan=private
-- 
Gitee


From d139092e7a2081903abea2c660e4f98e64dd0e64 Mon Sep 17 00:00:00 2001
From: YH <2543387770@qq.com>
Date: Sat, 19 Jun 2021 17:38:43 +0800
Subject: [PATCH 4/4] =?UTF-8?q?Vue=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...75\345\220\215\350\247\206\345\233\276.md" | 80 +++++++++++++++++++
 ...21\345\222\214\345\210\253\345\220\215.md" | 49 ++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 "\351\273\204\345\256\207\347\205\214/6.19-1 Vue\345\221\275\345\220\215\350\267\257\347\272\277\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md"
 create mode 100644 "\351\273\204\345\256\207\347\205\214/6.19-2 Vue\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215.md"

diff --git "a/\351\273\204\345\256\207\347\205\214/6.19-1 Vue\345\221\275\345\220\215\350\267\257\347\272\277\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md" "b/\351\273\204\345\256\207\347\205\214/6.19-1 Vue\345\221\275\345\220\215\350\267\257\347\272\277\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md"
new file mode 100644
index 0000000..bc8c72e
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.19-1 Vue\345\221\275\345\220\215\350\267\257\347\272\277\343\200\201\345\221\275\345\220\215\350\247\206\345\233\276.md"	
@@ -0,0 +1,80 @@
+# Vue命名视图、重定向和别名、将 props 传递给路由组件
+
+## 命名路线
+
+```
+// mian.js配置
+let router = new VueRouter({
+  routes: [
+    {
+      path: '/user/:userId',
+      name: 'user',
+      component: User
+    }
+  ]
+})
+```
+
+要链接到命名路由，您可以将对象传递给router-link组件的toprop：
+
+```
+<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
+```
+
+注：这里name对应的是上面配置里的name，params后的参数名对应path后面冒号后的参数。
+
+## 命名视图
+
+```
+<router-view class="view one"></router-view>
+<router-view class="view two" name="a"></router-view>
+<router-view class="view three" name="b"></router-view>
+```
+
+注：router-view没有name时将default作为它的name。
+
+### 嵌套命名视图
+
+```
+<!-- Index页配置 -->
+<template>
+<div>
+    <h1>这是一个页面</h1>
+    <div>
+        <router-view></router-view>
+        <!-- Top页 -->
+        <router-view name="top"></router-view>
+        <!-- Left页 -->
+        <router-view name="left"></router-view>
+        <!-- Cons页 -->
+        <router-view name="cons"></router-view>
+    </div>
+</div>
+</template>
+```
+
+```
+// mian.js配置
+let router = new VueRouter({
+  mode:"history",
+  routes:[
+    {
+      path:"/",
+      component:Index,
+      children:[
+        {
+          path:"top",
+          component:Top
+        },{
+          path:"show",
+          components:{
+            top:Top,
+            left:Left,
+            cons:Cons
+          }
+        }
+      ]
+    }
+  ]
+})
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\256\207\347\205\214/6.19-2 Vue\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215.md" "b/\351\273\204\345\256\207\347\205\214/6.19-2 Vue\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215.md"
new file mode 100644
index 0000000..4ccd57b
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.19-2 Vue\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215.md"	
@@ -0,0 +1,49 @@
+# Vue重定向和别名、将 props 传递给路由组件
+
+## 重定向
+
+重定向也在routes配置中完成。从/a到重定向/b：
+
+```
+// main.js配置
+let router = new VueRouter({
+  routes: [
+    { path: '/a', redirect: '/b' } // 当你访问 '/a' 时,会自动跳转访问 '/b' 
+  ]
+})
+```
+
+重定向还可以针对命名路由：
+
+```
+let router = new VueRouter({
+  routes: [
+    { path: '/a', redirect: { name: 'foo' }}
+  ]
+})
+```
+
+也使用一个函数进行动态重定向：
+```
+let router = new VueRouter({
+  routes: [
+    { path: '/a', redirect: to => {
+      // 函数接收目标路由作为参数
+      // 在此处返回重定向路径/位置。
+    }}
+  ]
+})
+```
+
+## 别名
+
+重定向是指当用户访问时 '/a' ，URL 将被替换为 '/b' ，然后匹配为 '/b' 。
+'/a' 的别名 '/b' 意味着当用户访问时 '/b' ，URL 仍然存在 '/b' ，但它会像用户正在访问一样匹配/a。
+
+```
+let router = new VueRouter({
+  routes: [
+    { path: '/a', component: A, alias: '/b' }
+  ]
+})
+```
-- 
Gitee