From 0fcb7210531180306c162bfbfdca8bd848cb9662 Mon Sep 17 00:00:00 2001
From: szq <129>
Date: Tue, 8 Jun 2021 11:41:49 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9F=BA=E7=A1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...4\344\273\266\345\237\272\347\241\200).md" | 104 ++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 "\346\226\275\345\277\227\345\274\272/2021-6-8(\347\273\204\344\273\266\345\237\272\347\241\200).md"

diff --git "a/\346\226\275\345\277\227\345\274\272/2021-6-8(\347\273\204\344\273\266\345\237\272\347\241\200).md" "b/\346\226\275\345\277\227\345\274\272/2021-6-8(\347\273\204\344\273\266\345\237\272\347\241\200).md"
new file mode 100644
index 0000000..c55ef45
--- /dev/null
+++ "b/\346\226\275\345\277\227\345\274\272/2021-6-8(\347\273\204\344\273\266\345\237\272\347\241\200).md"
@@ -0,0 +1,104 @@
+# 基本示例
+1. 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
+```
+    <div id="app-1">
+        <button-counter></button-counter>
+    </div>
+
+    <script>
+        Vue.component('button-counter', {
+            data: function () {
+                return {
+                    count: 0
+                }
+            },
+            // template: '<button v-on:click="count++">第 {{ count }} 次点击</button>'
+            template:'<input type="button" :value="count" @click="count++">'
+        })
+        let app1=new Vue({
+            el:'#app-1',
+            data:{
+
+            }
+        })
+    </script>
+```
+ 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项
+# 组件的复用
+1. 你可以将组件任意次数的复用
+```
+    <div id="app-1">
+        <button-counter></button-counter>
+        <button-counter></button-counter>
+        <button-counter></button-counter>
+        <button-counter></button-counter>
+    </div>
+```
+ 注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建
+# data 必须是一个函数
+1. 当我们定义这个 button-counter 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象
+```
+data: {
+  count: 0
+}
+```
+取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
+```
+data: function () {
+  return {
+    count: 0
+  }
+}
+```
+ 如果 Vue 没有这条规则，则点击一个按钮将会影响到其它所有实例
+# 组件的组织
+1. 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的
+```
+Vue.component('my-component-name', {
+  // ... options ...
+})
+```
+ 全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中
+# 通过 Prop 向子组件传递数据
+1. Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property,我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中
+```
+    <div id="app-2">
+        <blog-post title="轮滑鞋老毕得"></blog-post>
+    </div>
+    <script>
+        Vue.component('blog-post',{
+            props:['title'],
+            template:'<h1>{{title}}</h1>'
+        })
+        let app2=new Vue({
+            el:'#app-2',
+            data:{
+                
+            }
+        })
+    </script>
+```
+ 一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop
+2. 在 data 里有一个博文的数组,要为每篇博文渲染一个组件
+```
+    <div id="app-2">
+        <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
+    </div>
+    <script>
+        Vue.component('blog-post',{
+            props:['title'],
+            template:'<h1>{{title}}</h1>'
+        })
+        let app2=new Vue({
+            el:'#app-2',
+            data:{
+                posts:[
+                    {id:1,title:'轮滑鞋老毕得'},
+                    {id:2,title:'轮滑鞋老毕'},
+                    {id:3,title:'轮滑鞋老'}
+                ]
+            }
+        })
+    </script>
+```
+ 发现我们可以使用 v-bind 来动态传递 prop
\ No newline at end of file
-- 
Gitee


From f2fb6461823ef8df97aba4988eaa50f9744543a8 Mon Sep 17 00:00:00 2001
From: szq <129>
Date: Wed, 9 Jun 2021 18:11:50 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E5=AE=89=E8=A3=85VueCLI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...1-6-9(\345\256\211\350\243\205Vue CLI).md" | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 "\346\226\275\345\277\227\345\274\272/2021-6-9(\345\256\211\350\243\205Vue CLI).md"

diff --git "a/\346\226\275\345\277\227\345\274\272/2021-6-9(\345\256\211\350\243\205Vue CLI).md" "b/\346\226\275\345\277\227\345\274\272/2021-6-9(\345\256\211\350\243\205Vue CLI).md"
new file mode 100644
index 0000000..8d3bebb
--- /dev/null
+++ "b/\346\226\275\345\277\227\345\274\272/2021-6-9(\345\256\211\350\243\205Vue CLI).md"	
@@ -0,0 +1,52 @@
+1. 点开 Vue.js 的安装里的命令行工具点 “Vue CLI的文档”
+2. 点开始按钮，输入 powerShell 打开它
+3. 安装 yarn (npm i -g yarn)
+4. 安装 Vue Cli (yarn global add @vue/cli)
+5. 安装完成后就可以在命令行访问 vue 命令
+* 它说找不到 vue 
+# 解决方法
+1. 右键 “此电脑” 点 “属性”
+2. 点 “高级系统设置” 点 “环境变量”
+3. 在 “系统变量” 里 “path” 编辑它
+4. 新建/浏览(C:\Users\Administrator\AppData\Local\Yarn\bin)点确定
+5. 重新打开 powerShell 输入 vue 命令就好了
+# 进入 Vuecli
+1. 在D盘建一个文件夹，在里面建一个文件
+```
+d:
+mkdir 文件夹名
+cd.\文件夹名\
+vue create 文件名
+```
+2. 进入后选择 [Vue 2] 选 Yarn
+3. 安装完后输入
+```
+cd .\文件名\
+yarn serve
+```
+4. 找到你的文件夹，用 vscode 打开，然后它会弹出一个对话框，点 allow ，然后再去 src 里的App.vue 安装扩展包
+5. 打开调试控制台(ctrl+~),输入 yarn lint ，yarn build 
+ 找到你的文件夹，打开 dist 里的 html 文件
+6. 打开 xshell ，进入超级管理员(su 密码113),进入文件(cd /var/www/),创建文件(mkdir szq.icu),进入(cd szq.icu/)
+7. 将你的 dist 里的文件全部上传
+有错误的话
+```
+cd ..
+chmod -R 777 szq.ice
+vim /etc/nginx/conf.d/szq.icu.conf
+```
+插入配置文件
+```
+server {
+    listen 80;
+    server_name szq.icu;
+
+    location / {
+            root /var/www/szq.icu;
+            index index.html;
+    }
+}
+```
+8. 输入 nginx -t ，如果有 “successful” 那就是成功了，然后输入 nginx -s reload 
+9. 打开(c:\Windows\System32\drivers\etc),右键 hosts 属性，点安全里的高级选项，更改权限，添加，选择主体，高级，立即查找(administrator),完全控制，应用
+10. 右键 hosts 里的 OPen with Sublime Text 输入你的域名和文件名(172.16.10.214  szq.icu)然后就哦可了
\ No newline at end of file
-- 
Gitee


From f1dbcb9e54c28aee003873089cd8bfc88a30d6c1 Mon Sep 17 00:00:00 2001
From: szq <129>
Date: Thu, 10 Jun 2021 17:02:44 +0800
Subject: [PATCH 3/6] =?UTF-8?q?VUE=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...3\344\273\266\345\244\204\347\220\206).md" | 131 +++++++++++++++++-
 ...3\345\205\245\347\273\221\345\256\232).md" |   2 +-
 ...4\344\273\266\345\237\272\347\241\200).md" |   2 +-
 .../index.html"                               |  11 ++
 4 files changed, 137 insertions(+), 9 deletions(-)
 create mode 100644 "\346\226\275\345\277\227\345\274\272/index.html"

diff --git "a/\346\226\275\345\277\227\345\274\272/2021-6-4(\344\272\213\344\273\266\345\244\204\347\220\206).md" "b/\346\226\275\345\277\227\345\274\272/2021-6-4(\344\272\213\344\273\266\345\244\204\347\220\206).md"
index a2eea79..eeace19 100644
--- "a/\346\226\275\345\277\227\345\274\272/2021-6-4(\344\272\213\344\273\266\345\244\204\347\220\206).md"
+++ "b/\346\226\275\345\277\227\345\274\272/2021-6-4(\344\272\213\344\273\266\345\244\204\347\220\206).md"
@@ -92,7 +92,7 @@
     .once
     .passive
 ```
- .stop 阻止单击事件向父级传递
+ .stop 阻止冒泡事件
 ```
     <div id="example-4">
         <div v-on:click="pusit">
@@ -113,23 +113,140 @@
         })
     </script>
 ```
- .prevent
+ .prevent 提交不再跳转
 ```
+    <div id="app">
+        <a v-bind:href="blog" v-on:click.prevent="alert()">跳转</a>
+    </div>
 
+    <script>
+        new Vue({
+            el:'#app',
+            data:{
+                blog:'http://127.0.0.1:4578',
+                alert:function(){
+                    alert('跳不过去')
+                }
+            }
+        })
 ```
- .capture
+ .capture 添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素，多个该修饰符，则由外而内触发。就是谁有 。capture 修饰符，就先触发谁
+```
+    <div id="content">
+        <div id="obj1" v-on:click.capture="doc">
+            obj1
+            <div id="obj2" v-on:click.capture="doc">
+                obj2
+                <div id="obj3" v-on:click="doc">
+                    obj3
+                    <div id="obj4" v-on:click="doc">
+                    obj4
+                    <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
+                    由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
+                    -->
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        var content = new Vue({
+            el: "#content",
+            data: {
+                id: ''
+            },
+            methods: {
+                doc: function () {
+                    this.id= event.currentTarget.id;
+                    alert(this.id)
+                }
+            }
+        })
+    </script>
 ```
+ .self 跳过冒泡事件和捕获事件，只有点击作用在 .self 上的事件才可以触发点击事件
+```
+    <div id="content">
+        <div id="obj1" v-on:click.self="doc">
+            obj1
+            <div id="obj2" v-on:click="doc">
+                obj2
+                <div id="obj3" v-on:click="doc">
+                    obj3
+                    <div id="obj4" v-on:click="doc">
+                        obj4
+                        <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj4、obj3、obj2；
+                        由于 obj1 有修饰符，则直接跳过该元素，只有点击 obj1 才能触发点击事件
+                        -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
+    <script>
+        var content = new Vue({
+            el: "#content",
+            data: {
+                id: ''
+            },
+            methods: {
+                doc: function () {
+                    this.id = event.currentTarget.id;
+                    alert(this.id)
+                }
+            }
+        })
+    </script>
 ```
- .self
+ .once 单机事件只会触发一次
 ```
+    <div id="app">
+        <p>1 + {{age}}</p>
+        <button v-on:click.once="{{age++}}">+1</button>
+    </div>
 
+    <script>
+        new Vue({
+            el:'#app',
+            data:{
+                age:2
+            }
+        })
+    </script>
 ```
- .once
+ .passive 执行默认行为，每次事件产生，浏览器都会去查询是否有 preventDefault 阻止该事件的默认行为，加上 .passive 就是告诉浏览器，直接执行，从而提高性能
+ * 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为
+# 按键修饰符
+1. 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
 ```
-
+<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
+<input v-on:keyup.enter="submit">
+```
+2. 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
 ```
- .passive
+<input v-on:keyup.page-down="onPageDown">
 ```
+在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用
+# 按键码
+1. 
+# .exact 修饰符
+1. .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件
+```
+<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
+<button v-on:click.ctrl="onClick">A</button>
+
+<!-- 有且只有 Ctrl 被按下的时候才触发 -->
+<button v-on:click.ctrl.exact="onCtrlClick">A</button>
 
+<!-- 没有任何系统修饰符被按下的时候才触发 -->
+<button v-on:click.exact="onClick">A</button>
+```
+# 鼠标按钮修饰符
+1. 这些修饰符会限制处理函数仅响应特定的鼠标按钮
+```
+    .left
+    .right
+    .middle
 ```
\ No newline at end of file
diff --git "a/\346\226\275\345\277\227\345\274\272/2021-6-5(\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md" "b/\346\226\275\345\277\227\345\274\272/2021-6-5(\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md"
index 872ae18..03f1119 100644
--- "a/\346\226\275\345\277\227\345\274\272/2021-6-5(\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md"
+++ "b/\346\226\275\345\277\227\345\274\272/2021-6-5(\350\241\250\345\215\225\350\276\223\345\205\245\347\273\221\345\256\232).md"
@@ -207,7 +207,7 @@ select 字段将 value 作为 prop 并将 change 作为事件
             data:{
                 toggle:'no'
             }
-        })no
+        })
     </script>
 ```
  选中时 app7.toggle 是 yes，没选中时是 no
\ No newline at end of file
diff --git "a/\346\226\275\345\277\227\345\274\272/2021-6-8(\347\273\204\344\273\266\345\237\272\347\241\200).md" "b/\346\226\275\345\277\227\345\274\272/2021-6-8(\347\273\204\344\273\266\345\237\272\347\241\200).md"
index c55ef45..380576a 100644
--- "a/\346\226\275\345\277\227\345\274\272/2021-6-8(\347\273\204\344\273\266\345\237\272\347\241\200).md"
+++ "b/\346\226\275\345\277\227\345\274\272/2021-6-8(\347\273\204\344\273\266\345\237\272\347\241\200).md"
@@ -1,5 +1,5 @@
 # 基本示例
-1. 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
+1. 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 button-counter。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
 ```
     <div id="app-1">
         <button-counter></button-counter>
diff --git "a/\346\226\275\345\277\227\345\274\272/index.html" "b/\346\226\275\345\277\227\345\274\272/index.html"
new file mode 100644
index 0000000..b93013b
--- /dev/null
+++ "b/\346\226\275\345\277\227\345\274\272/index.html"
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee


From 249f7970d5068e1a84350d33780534d21a95c99e Mon Sep 17 00:00:00 2001
From: szq <129>
Date: Wed, 16 Jun 2021 17:09:09 +0800
Subject: [PATCH 4/6] Vue Router

---
 ...7\347\224\261\345\214\271\351\205\215).md" | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 "\346\226\275\345\277\227\345\274\272/2021-6-16(\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215).md"

diff --git "a/\346\226\275\345\277\227\345\274\272/2021-6-16(\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215).md" "b/\346\226\275\345\277\227\345\274\272/2021-6-16(\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215).md"
new file mode 100644
index 0000000..8dfe76a
--- /dev/null
+++ "b/\346\226\275\345\277\227\345\274\272/2021-6-16(\345\212\250\346\200\201\350\267\257\347\224\261\345\214\271\351\205\215).md"
@@ -0,0 +1,77 @@
+# 动态路由
+1. main.js
+```
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from 'vue-router'
+
+import index from './components/index'
+
+Vue.config.productionTip = false
+
+let router = new VueRouter({
+  mode:'history',
+  routes:[
+    {
+      path:'/index/',
+      component:index
+    }
+  ]
+})
+Vue.use(VueRouter)
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
+
+```
+ index.vue
+```
+<template>
+    <div>
+        <ul>
+            <li>真不错</li>
+            <li>针布搓</li>
+            <li>朕不搓</li>
+        </ul>
+    </div>
+</template>
+<style scoped>
+li{
+    color:blue;
+}
+li::marker{
+    content: '??';
+}
+li:hover::marker{
+    content: '!!';
+    
+}
+li:hover{
+    color: cyan;
+}
+</style>
+```
+# 捕获所有路由或 404 Not found 路由
+1. 常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)
+```
+let router = new VueRouter({
+  mode:'history',
+  routes:[
+    {
+      path:'/index/',
+      component:index
+    },
+    {
+      path:'*',
+      component:indes
+    }
+  ]
+})
+```
+ 除了 index 路由，其它的路由全会匹配 indes
+# 高级匹配模式
+1. vue-router 使用 path-to-regexp (opens new window)作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配
+# 匹配优先级
+1. 有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高
\ No newline at end of file
-- 
Gitee


From 91bb2abb5058133b4b8e0faa137dbfa7eab1dbfb Mon Sep 17 00:00:00 2001
From: szq <129>
Date: Fri, 18 Jun 2021 11:35:29 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E8=BF=98=E6=9C=AA=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...3\345\274\217\347\232\204\345\257\274\350\210\252).md" | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 "\346\226\275\345\277\227\345\274\272/2021-6-18(\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252).md"

diff --git "a/\346\226\275\345\277\227\345\274\272/2021-6-18(\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252).md" "b/\346\226\275\345\277\227\345\274\272/2021-6-18(\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252).md"
new file mode 100644
index 0000000..918e212
--- /dev/null
+++ "b/\346\226\275\345\277\227\345\274\272/2021-6-18(\347\274\226\347\250\213\345\274\217\347\232\204\345\257\274\350\210\252).md"
@@ -0,0 +1,8 @@
+AdminLTE3
+Elementui
+iView
+# router.push(location, onComplete?, onAbort?)
+1. 想要导航到不同的 URL，则使用 router.push 方法，当你点击 router-link 时，这个方法会在内部调用，所以说，点击 router-link :to="..." 等同于调用 router.push(...)
+        声明式	            编程式
+router-link :to="..."	router.push(...)
+该方法的参数可以是一个字符串路径，或者一个描述地址的对象
-- 
Gitee


From 73ee80d05ef90c53dd61babf6478746096c88d11 Mon Sep 17 00:00:00 2001
From: szq <129>
Date: Sat, 19 Jun 2021 17:43:52 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...5\345\220\215\350\247\206\345\233\276).md" | 128 ++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 "\346\226\275\345\277\227\345\274\272/2021-6-19(\345\221\275\345\220\215\350\267\257\347\224\261\345\221\275\345\220\215\350\247\206\345\233\276).md"

diff --git "a/\346\226\275\345\277\227\345\274\272/2021-6-19(\345\221\275\345\220\215\350\267\257\347\224\261\345\221\275\345\220\215\350\247\206\345\233\276).md" "b/\346\226\275\345\277\227\345\274\272/2021-6-19(\345\221\275\345\220\215\350\267\257\347\224\261\345\221\275\345\220\215\350\247\206\345\233\276).md"
new file mode 100644
index 0000000..ba1c33c
--- /dev/null
+++ "b/\346\226\275\345\277\227\345\274\272/2021-6-19(\345\221\275\345\220\215\350\267\257\347\224\261\345\221\275\345\220\215\350\247\206\345\233\276).md"
@@ -0,0 +1,128 @@
+# 命名路由
+1. 通过一个名称来标识一个路由显得更方便一些，在链接一个路由，或者是执行一些跳转的时候，可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称
+```
+    import Vue from 'vue'
+    import App from './App.vue'
+    import VueRouter from 'vue-router'
+
+    import User from './components/User'
+    Vue.config.productionTip = false
+    Vue.use(VueRouter)
+    let router=new VueRouter({
+    mode:'history',
+    routes:[
+        {
+        path:'/user/:id',
+        name:'user',
+        component:User
+        }
+    ]
+    })
+    new Vue({
+    router,
+    render: h => h(App),
+    }).$mount('#app')
+```
+2. 要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象
+```
+    <div id="app">
+        <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
+        <router-view></router-view>
+    </div>
+```
+# 命名视图
+1. 一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)
+```
+import Vue from 'vue'
+import App from './App.vue'
+import VueRouter from 'vue-router'
+
+import User from './components/User'
+import Left from './components/Left'
+import Right from './components/Right'
+import Top from './components/Top'
+Vue.config.productionTip = false
+Vue.use(VueRouter)
+let router=new VueRouter({
+  mode:'history',
+  routes:[
+    {
+      path:'/user',
+      name:'user',
+      components:{
+          user:User,
+          left:Left,
+          right:Right,
+          top:Top
+      }
+    }
+  ]
+})
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
+```
+2. 你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default
+```
+    <div id="app">
+        <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
+        <router-view></router-view>
+        <router-view name="user"></router-view>
+        <router-view name="left"></router-view>
+        <router-view name="right"></router-view>
+        <router-view name="top"></router-view>
+    </div>
+```
+# 嵌套命名视图
+1. 我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件,然后你可以用这个路由配置完成该布局
+```
+    import Vue from 'vue'
+    import App from './App.vue'
+    import VueRouter from 'vue-router'
+
+    import User from './components/User'
+    import Name from './components/Name'
+    import Left from './components/Left'
+    import Userset from './components/Userset'
+
+
+    Vue.config.productionTip = false
+    Vue.use(VueRouter)
+    let router=new VueRouter({
+    mode:'history',
+    routes:[
+        {
+        path:'/user',
+        component:User,
+        children:[
+            {
+            path:'a',
+            component:Userset
+            },
+            {
+            path:'b',
+            components:{
+                name:Name,
+                left:Left
+            }
+            }
+        ]
+        }
+    ]
+    })
+    new Vue({
+    router,
+    render: h => h(App),
+    }).$mount('#app')
+```
+2. User 组件的 template 
+```
+    <div>
+        真不错
+        <hr>
+        <router-view></router-view>
+        <router-view name="name"></router-view>
+        <router-view name="left"></router-view>
+    </div>
+```
\ No newline at end of file
-- 
Gitee