diff --git a/docs/vue.md b/docs/vue.md
index 400e141..ebbc2e1 100644
--- a/docs/vue.md
+++ b/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['personAbout/firstPersonName']
-//方式二：借助mapGetters读取：
+this.$store.getters[
+ 'personAbout/firstPersonName'
+]
+```
+
+方式二：借助 mapGetters 读取：
+
+```js
...mapGetters('countAbout',['bigSum'])
```
-3.开启命名空间后，组件中调用dispatch
+#### 开启命名空间后，组件中调用dispatch
+
+方式一：自己直接 dispatch
```javascript
-//方式一：自己直接dispatch
-this.$store.dispatch('personAbout/addPersonWang',person)
-//方式二：借助mapActions:
-...mapActions('countAbout',{incrementOdd:'jia0dd',incrementWait:'jiaWait'})
+this.$store.dispatch(
+ 'personAbout/addPersonWang', person
+)
```
-4.开启命名空间后，组件中调用commit
+方式二：借助mapActions:
+
+```js
+...mapActions('countAbout',{
+ incrementOdd:'jia0dd',
+ incrementWait:'jiaWait'
+})
+```
+
+#### 开启命名空间后，组件中调用commit
+
+方式一：自己直接 commit
```javascript
-//方式一：自己直接commit
-this.$store.commit('personAbout/ADD_PERSON',person)
-//方式二：借助mapMutations:
-...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
+this.$store.commit(
+ 'personAbout/ADD_PERSON', person
+)
```
-### 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:[
- path:'/about',
- component:About
- path:'/home',
- component:Home
+ routes: [
+ path: '/about',
+ component: About
+ path: '/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文件夹。
->
->2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
->
->3.每个组件都有自己的$route属性，里面存储着自己的路由信息。
->
->4.整个应用只有一个router，可以通过组件的srouter 属性获取到。
+几个注意点
+
+- 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
+- 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
+- 每个组件都有自己的$route属性，里面存储着自己的路由信息。
+- 整个应用只有一个router，可以通过组件的srouter 属性获取到。
+<!--rehype:className=style-list-arrow-->
### 3.路由的query
```html
<template>
- <div>
- <ul class="list">
- <!-- 跳转路由并携带参数 -->
- <!-- <li v-for="item of data" :key="item.id">
- <router-link
+ <div>
+ <ul class="list">
+ <!-- to的对象写法 -->
+ <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> -->
- <!-- to的对象写法 -->
- <li v-for="item of data" :key="item.id">
- <router-link
- class="link"
- :to="{
- path:'/home/message/mes',
- query:{
- id:item.id,
- title:item.mes
- }
- }"
- >{{item.mes}}</router-link>
- </li>
- </ul>
- <hr>
- <router-view></router-view>
- </div>
+ :to="{
+ path:'/home/message/mes',
+ query: { id:item.id, 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{
- margin-left:80px;
- }
- .link{
+ .list { margin-left:80px; }
+ .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>
```
-> 使用
->
-> :to="{
-> name:'',
-> path:'/home/message/mes',
->
-> query:{id:item.id,
->
-> title:item.mes
->
-> }
->
-> }"
+### 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
+<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"
- :to="`/home/message/mes/${item.id}/${item.mes}`"
- >{{item.mes}}
+ class="link"
+ :to="`/home/message/mes/${item.id}/${item.mes}`"
+ >{{item.mes}}
</router-link>
</li>
```
-3.接收
+#### 3. 接收
```html
<li>编号{{$route.params.id}}</li>
@@ -942,47 +968,50 @@ children:[
### 6.props的使用
-```javascript
-7.路由的props配置
+路由的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 {
-id:route.query.id,
-title:route.query.title
+ return {
+ id:route.query.id,
+ title:route.query.title
+ }
+}
```
-> \<router-link>的replace属性
->
-> 1.作用：控制路由跳转时操作浏览器历史记录的模式
->
-> 2.浏览器的历史记录有两种写入方式：分别为 push和replace,默认为push
->
-> 3.如何开启replace 模式：
->
-> push是追加历史记录,
->
-> replace 是替换当前记录[路由跳转时候\<router-link replace>News\</router-link>]
+\<router-link> 的 replace 属性
-### 7.编程式路由导航
+1. 作用：控制路由跳转时操作浏览器历史记录的模式
+2. 浏览器的历史记录有两种写入方式：分别为 push和replace,默认为push
+3. 如何开启replace 模式： `push` 是追加历史记录,`replace` 是替换当前记录[路由跳转时候 `<router-link replace>News\</router-link>`]
-1.作用：不借助router-link实现路由跳转，让跳转更加灵活
-2.具体编码：
+### 7. 编程式路由导航
+
+作用：不借助router-link实现路由跳转，让跳转更加灵活
```javascript
-//$router的两个API
this.$router.push({
name:'xiangqing',
params:{
- id:xxx,
- title:xxx
- //实现路由跳转，让路由跳转更加灵活
- }
+ id: 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 路由组件被激活时触发
-
-deactivated 路由组件失活时触发
+- `activated` 路由组件被激活时触发
+- `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
---