doc: update docs/vue.md #832

docs/vue.md

@@ -723,133 +723,161 @@ const value = inject(ProvideKey)
 
 ## 路由
 
-### 1.路由的基本使用
+### 1. 路由的基本使用
 
-1.开启命名空间后，组件中读取state数据:
+#### 开启命名空间后，组件中读取state数据
+
+方式一：自己直接读取
 
 ```javascript
-//方式一：自己直接读取
 this.$store.state.personAbout.list
-
-//方式二：借助mapState读取：
-...mapState('countAbout',['sum','school','subject']),
 ```
 
-2.开启命名空间后，组件中读取getters数据:
+方式二：借助 mapState 读取：
+
+```js
+...mapState('countAbout',[
+  'sum','school','subject'
+]),
+```
+
+#### 开启命名空间后，组件中读取getters数据
+
+方式一：自己直接读取
 
 ```javascript
-//方式一：自己直接读取
+this.$store.getters[
-this.$store.getters['personAbout/firstPersonName']
+  'personAbout/firstPersonName'
-//方式二：借助mapGetters读取：
+]
+```
+
+方式二：借助 mapGetters 读取：
+
+```js
 ...mapGetters('countAbout',['bigSum'])
 ```
 
-3.开启命名空间后，组件中调用dispatch
+#### 开启命名空间后，组件中调用dispatch
+
+方式一：自己直接 dispatch
 
 ```javascript
-//方式一：自己直接dispatch
+this.$store.dispatch(
-this.$store.dispatch('personAbout/addPersonWang',person)
+  'personAbout/addPersonWang', person
-//方式二：借助mapActions:
+)
-...mapActions('countAbout',{incrementOdd:'jia0dd',incrementWait:'jiaWait'})
 ```
 
-4.开启命名空间后，组件中调用commit
+方式二：借助mapActions:
+
+```js
+...mapActions('countAbout',{
+  incrementOdd:'jia0dd',
+  incrementWait:'jiaWait'
+})
+```
+
+#### 开启命名空间后，组件中调用commit
+
+方式一：自己直接 commit
 
 ```javascript
-//方式一：自己直接commit
+this.$store.commit(
-this.$store.commit('personAbout/ADD_PERSON',person)
+  'personAbout/ADD_PERSON', person
-//方式二：借助mapMutations:
+)
-...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
 ```
 
-### 2.路由的使用
+方式二：借助 mapMutations:
+
+```js
+...mapMutations('countAbout', {
+  increment:'JIA',decrement:'JIAN'
+}),
+```
+
+### 2. 路由的使用
 
 ```javascript
 import VueRouter from 'vue-router'
-//引入Luyou 组件
+// 引入Luyou 组件
 import About from '../components/About'
 import Home from '../components/Home'
-//创建router实例对象，去管理一组一组的路由规则
+// 创建router实例对象，去管理一组一组的路由规则
 const router = new VueRouter({
-    routes:[
+  routes: [
-        path:'/about',
+    path: '/about',
-        component:About
+    component: About
-        path:'/home',
+    path: '/home',
-        component:Home
+    component: Home
+  ]
 })
-//暴露router
+// 暴露 router
 export default router
 ```
 
-4.实现切换（active-class可配置高亮样式）
+实现切换（active-class可配置高亮样式）
 
-\<router-link active-class="active" to="/about">About\</router-link>
+```html
+<router-link
+  active-class="active"
+  to="/about">
+  About
+</router-link>
+```
 
-5.指定展示位置
+指定展示位置
 
-\<router-diew>\</router-view>
+```html
+<router-diew></router-view>
+```
 
->几个注意点
+几个注意点
->
+
->1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
+- 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
->
+- 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
->2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
+- 每个组件都有自己的$route属性，里面存储着自己的路由信息。
->
+- 整个应用只有一个router，可以通过组件的srouter 属性获取到。
->3.每个组件都有自己的$route属性，里面存储着自己的路由信息。
+<!--rehype:className=style-list-arrow-->
->
->4.整个应用只有一个router，可以通过组件的srouter 属性获取到。
 
 ### 3.路由的query
 
 ```html
 <template>
-    <div>
+  <div>
-        <ul class="list">
+    <ul class="list">
-            <!-- 跳转路由并携带参数 -->
+        <!-- to的对象写法 -->
-   <!--          <li v-for="item of data" :key="item.id">
+        <li v-for="item of data" :key="item.id">
-                <router-link 
+            <router-link 
                 class="link" 
-                :to="`/home/message/mes?id=${item.id}&title=${item.mes}`"
+                :to="{
-            >{{item.mes}}</router-link> -->
+                    path:'/home/message/mes',
-            <!-- to的对象写法 -->
+                    query: { id:item.id, title:item.mes }
-            <li v-for="item of data" :key="item.id">
+                }"
-                <router-link 
+            >{{item.mes}}</router-link>
-                    class="link" 
+        </li>
-                    :to="{
+    </ul>
-                        path:'/home/message/mes',
+    <hr>
-                        query:{
+    <router-view></router-view>
-                            id:item.id,
+  </div>
-                            title:item.mes
-                        }
-                    }"
-                >{{item.mes}}</router-link>
-            </li>
-        </ul>
-        <hr>
-        <router-view></router-view>
-    </div>
 </template>
 
 <script>
 export default {
     name:'HomeChild1',
     data() {
-    return {
+      return {
         data:[
             {id:1,mes:"消息1"},
             {id:2,mes:"消息2"},
             {id:3,mes:"消息3"}
         ]
-        }
+      }
     },
 }
 </script>
 
 <style scoped>
-    .list{
+  .list { margin-left:80px; }
-        margin-left:80px;
+  .link{
-    }
-    .link{
     color: orange;
     text-decoration: none;
     background-color: skyblue;
@@ -857,59 +885,57 @@ export default {
 </style>
 ```
 
-> 接收参数          `{{$route.query.id}}`
+> 接收参数 `{{$route.query.id}}`
 
-### 4.命名路由
+#### 跳转路由并携带参数
-
-```javascript
-    routes:[
-        {
-            path:'/about',
-            component:AboutBody
-        },
-        {
-            path:'/home',
-            component:HomeBody,
-            children:[
-                {
-                    path:'news',
-                    component:HomeChild
-                },
-                {
-                    path:'message',
-                    component:HomeChild1,
-                    //多级路由
-                    children:[
-                        {
-                            name:'richu',
-                            path:'mes',
-                            component:HomeMessage
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
 
+```html
+<li v-for="item of data" :key="item.id">
+    <router-link 
+        class="link" 
+        :to="`/home/message/mes?id=${item.id}&title=${item.mes}`"
+    >
+      {{item.mes}}
+    </router-link>
+</li>
 ```
 
-> 使用
+### 4. 命名路由
->
+
-> :to="{ 
+```javascript
->      		name:'',
+routes:[
->             path:'/home/message/mes',
+    { path:'/about', component:AboutBody },
->
+    {
->    ​		 query:{id:item.id,
+        path:'/home',
->
+        component:HomeBody,
->    ​		title:item.mes
+        children:[
->
+            { path:'news', component:HomeChild },
->    ​	}
+            { 
->
+              path:'message',
->    }"     
+              component:HomeChild1,
+              //多级路由
+              children:[
+                  { name:'richu', path:'mes', component:HomeMessage }
+              ]
+            }
+        ]
+    }
+]
+```
+
+使用
+
+```html
+<router-link :to="{ 
+  name:'',
+  path:'/home/message/mes',
+​  query:{ id:item.id,title:item.mes }
+}">
+```  
 
 ### 5.params参数的使用
 
-1.声明接收
+#### 1. 声明接收
 
 ```javascript
 children:[
@@ -921,19 +947,19 @@ children:[
 ]
 ```
 
-2.传递
+#### 2. 传递
 
 ```html
 <li v-for="item of data" :key="item.id">
     <router-link 
-                 class="link" 
+      class="link" 
-                 :to="`/home/message/mes/${item.id}/${item.mes}`"
+      :to="`/home/message/mes/${item.id}/${item.mes}`"
-                 >{{item.mes}}
+      >{{item.mes}}
     </router-link>
 </li>
 ```
 
-3.接收
+#### 3. 接收
 
 ```html
 <li>编号{{$route.params.id}}</li>
@@ -942,47 +968,50 @@ children:[
 
 ### 6.props的使用
 
-```javascript
+路由的props配置
-7.路由的props配置
+
+```js
+{
+  name: 'xiangqing',
+  path:'detail/:id',
+  component:Detail
+}
+```
+
 作用：让路由组件更方便的收到参数
-name:'xiangqing',path:'detail/:id',component:Detail,
+
+```javascript
 //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detai1组件
 // props:{a:900]
 //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detai1组件
 // props:true
 //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
 props(route){
-return {
+  return {
-id:route.query.id,
+    id:route.query.id,
-title:route.query.title
+    title:route.query.title
+  }
+}
 ```
 
-> \<router-link>的replace属性
+\<router-link> 的 replace 属性
->
-> 1.作用：控制路由跳转时操作浏览器历史记录的模式
->
-> 2.浏览器的历史记录有两种写入方式：分别为 push和replace,默认为push
->
-> 3.如何开启replace 模式：
->
-> push是追加历史记录,
->
-> replace 是替换当前记录[路由跳转时候\<router-link replace>News\</router-link>]
 
-### 7.编程式路由导航
+1. 作用：控制路由跳转时操作浏览器历史记录的模式
+2. 浏览器的历史记录有两种写入方式：分别为 push和replace,默认为push
+3. 如何开启replace 模式： `push` 是追加历史记录,`replace` 是替换当前记录[路由跳转时候 `<router-link replace>News\</router-link>`]
 
-1.作用：不借助router-link实现路由跳转，让跳转更加灵活
+### 7. 编程式路由导航
-2.具体编码：
+
+作用：不借助router-link实现路由跳转，让跳转更加灵活
 
 ```javascript
-//$router的两个API
 this.$router.push({
     name:'xiangqing',
     params:{
-        id:xxx,
+        id: xxx,
-        title:xxx
+        title: xxx
-		//实现路由跳转，让路由跳转更加灵活
+        // 实现路由跳转，让路由跳转更加灵活
-	}
+    }
 })
 this.$router.replace({
     name:'xiangqing',
@@ -998,9 +1027,7 @@ this.$router.go(3);
 
 ### 8.缓存路由组件
 
-> 让不展示的路由组件保持挂载，不被销毁
+让不展示的路由组件保持挂载，不被销毁，示例：
-
-> 具体编码
 
 ```html
 <keep-alive include="news">
@@ -1008,22 +1035,20 @@ this.$router.go(3);
 </keep-alive>
 ```
 
-> include里面写模块名,用于保存指定的模块
+- `include` 里面写模块名,用于保存指定的模块
 
 ### 9.新生命周期钩子
 
 > 作用：路由组件独有的，用于捕获路由组件的激活状态
 
-activated		路由组件被激活时触发
+- `activated` 路由组件被激活时触发
-
+- `deactivated` 路由组件失活时触发
-deactivated		路由组件失活时触发
 
 ## 路由守卫
 
-#### 1.前置路由守卫
+### 1.前置路由守卫
 
 ```javascript
-/* 前置路由 */
 route.beforeEach((from,to,next)=>{
     if (to.meta.isAuth){
         alert("1");
@@ -1034,17 +1059,20 @@ route.beforeEach((from,to,next)=>{
 })
 ```
 
-#### 2.后置路由守卫
+前置路由
+
+### 2.后置路由守卫
 
 ```javascript
-/* 后置路由 */
 route.afterEach((from,to)=>{
     console.log(to);
     document.title=from.meta.title;
 })
 ```
 
-#### 3.独享路由守卫
+后置路由
+
+### 3.独享路由守卫
 
 ```javascript
 {
@@ -1057,21 +1085,25 @@ route.afterEach((from,to)=>{
 },
 ```
 
-> 独享路由守卫只有前置路由守卫没有后置路由守卫
+独享路由守卫只有前置路由守卫没有后置路由守卫
 
-#### 4.组件内路由守卫
+### 4.组件内路由守卫
+
+通过路由规则，进入该组件时被调用
 
 ```javascript
-/* 通过路由规则，进入该组件时被调用 */
 beforeRouteEnter (to, from, next) {
     // ...
-},
-/* 通过路由规则，离开组件时被调用 */
-beforeRouteLeave (to, from, next) {
-    // ...
 }
 ```
 
+通过路由规则，离开组件时被调用
+
+```js
+beforeRouteLeave (to, from, next) {
+    // ...
+}
+```
 
 Vue 中使用 TypeScript
 ---