From 8df5c74bf722d2ca9ac2e2e98522b366079eff6d Mon Sep 17 00:00:00 2001
From: unknown <562585785@qq.com>
Date: Wed, 16 Jun 2021 17:22:32 +0800
Subject: [PATCH 1/4] tj
---
.../2021-6-16.md" | 56 +++++++++++++++++++
1 file changed, 56 insertions(+)
create mode 100644 "\346\275\230\351\207\221\351\223\216/2021-6-16.md"
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 0000000..c6267a1
--- /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中写下 '' 即可使用路由文件
+
+在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
--
Gitee
From 994374853d22105afc496915c9bb13ee9864e8f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=93=8E?= <562585785@qq.com>
Date: Fri, 18 Jun 2021 10:23:40 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
"\346\275\230\351\207\221\351\223\216/2021-6-16.md" | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
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"
index c6267a1..058db5a 100644
--- "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"
@@ -31,12 +31,12 @@ let router=new VueRouter({
```
接着在new vue 中使用router即可，router为缩写，完整的应该是router:routes
-在app.vue中写下 '' 即可使用路由文件
+在app.vue中写下 `` 即可使用路由文件
-在path后写下 '/:id' 后可以在路由文件中通过 '{{$route.params.id}}' 获取地址栏中的数据
+在path后写下 `/:id` 后可以在路由文件中通过 `{{$route.params.id}}` 获取地址栏中的数据
# 镶嵌路由
-在初始化路由时在加入一个键值对 'children' ,其余操作可路由一样，作用在与可以在原路由基础上再添加一个路由
+在初始化路由时在加入一个键值对 `children` ,其余操作可路由一样，作用在与可以在原路由基础上再添加一个路由
```
let router=new VueRouter({
mode:'history',
--
Gitee
From 1176cdbc009b903ef71d87c34c647ba0a046fd6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=93=8E?= <562585785@qq.com>
Date: Fri, 18 Jun 2021 11:38:27 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E7=BC=96=E7=A8=8B=E5=BC=8F=E5=AF=BC?=
=?UTF-8?q?=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../2021-6-18.md" | 25 +++++++++++++++++++
1 file changed, 25 insertions(+)
create mode 100644 "\346\275\230\351\207\221\351\223\216/2021-6-18.md"
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 0000000..d3b6312
--- /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
--
Gitee
From 9f05589d2c59fe47a16518c9b38a553a2cd2037e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=93=8E?= <562585785@qq.com>
Date: Sat, 19 Jun 2021 17:24:03 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=91=BD=E5=90=8D=E8=B7=AF=E7=94=B1?=
=?UTF-8?q?=E3=80=81=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../2021-6-19.md" | 51 +++++++++++++++++++
1 file changed, 51 insertions(+)
create mode 100644 "\346\275\230\351\207\221\351\223\216/2021-6-19.md"
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 0000000..5cb43f2
--- /dev/null
+++ "b/\346\275\230\351\207\221\351\223\216/2021-6-19.md"
@@ -0,0 +1,51 @@
+# 命名路由
+有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
+
+在定义路由后，添加一个name键值对，给路由命名，命名的使用方法为
+```
+ user
+```
+# 命名视图
+当需要一个路由展示多个视图时使用此方法
+
+在 `components` 对象中给多个视图命名，在使用时需要多个 `router-view`,并且给其命名相应的名字以显示视图
+```
+ routes:[{
+ path:'/user',
+ components:{
+ users:User
+ }
+
+
+
+
+```
+# 嵌套命名视图
+在视图中使用视图
+
+在嵌套路由中使用命名视图，然后在相应的视图中定义出口
+```
+let router=new VueRouter({
+ mode:"history",
+ routes:[{
+ path:'/user',
+ name:'users',
+ component:User,
+ children:[
+ {
+ path:'login',
+ name:'login',
+ components:{
+ logins:Login,
+ registry:Registry
+ }
+ }
+ ]
+ }]
+})
+```
+这个嵌套视图的出口在User视图下
+```
+
+
+```
\ No newline at end of file
--
Gitee