devttl/reference
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

doc: update docs/vue.md #832

Browse Source
This commit is contained in:
jaywcjlove
2024-09-29 18:29:17 +08:00
parent 88559b491c
commit a74c7e2092
1 changed files with 199 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
docs/vue.md
View File

@@ -725,41 +725,73 @@ const value = inject(ProvideKey)
### 1. 路由的基本使用 ### 1. 路由的基本使用
1.开启命名空间后，组件中读取state数据: #### 开启命名空间后，组件中读取state数据
方式一：自己直接读取
```javascript ```javascript
//方式一：自己直接读取
this.$store.state.personAbout.list this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),
``` ```
2.开启命名空间后，组件中读取getters数据: 方式二：借助 mapState 读取：
```js
...mapState('countAbout',[
'sum','school','subject'
]),
```
#### 开启命名空间后，组件中读取getters数据
方式一：自己直接读取
```javascript ```javascript
//方式一：自己直接读取 this.$store.getters[
this.$store.getters['personAbout/firstPersonName'] 'personAbout/firstPersonName'
//方式二：借助mapGetters读取： ]
```
方式二：借助 mapGetters 读取：
```js
...mapGetters('countAbout',['bigSum']) ...mapGetters('countAbout',['bigSum'])
``` ```
3.开启命名空间后，组件中调用dispatch #### 开启命名空间后，组件中调用dispatch
方式一：自己直接 dispatch
```javascript ```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 ```javascript
//方式一：自己直接commit this.$store.commit(
this.$store.commit('personAbout/ADD_PERSON',person) 'personAbout/ADD_PERSON', person
//方式二：借助mapMutations: )
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}), ```
方式二：借助 mapMutations:
```js
...mapMutations('countAbout', {
increment:'JIA',decrement:'JIAN'
}),
``` ```
### 2. 路由的使用 ### 2. 路由的使用
@@ -776,28 +808,35 @@ const router = new VueRouter({
component: About component: About
path: '/home', path: '/home',
component: Home component: Home
]
}) })
// 暴露 router // 暴露 router
export default 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 ### 3.路由的query
@@ -805,22 +844,13 @@ export default router
<template> <template>
<div> <div>
<ul class="list"> <ul class="list">
<!-- 跳转路由并携带参数 -->
<!-- <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的对象写法 --> <!-- 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" class="link"
:to="{ :to="{
path:'/home/message/mes', path:'/home/message/mes',
query:{ query: { id:item.id, title:item.mes }
id:item.id,
title:item.mes
}
}" }"
>{{item.mes}}</router-link> >{{item.mes}}</router-link>
</li> </li>
@@ -846,9 +876,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.list{ .list { margin-left:80px; }
margin-left:80px;
}
.link{ .link{
color: orange; color: orange;
text-decoration: none; text-decoration: none;
@@ -859,57 +887,55 @@ export default {
> 接收参数 `{{$route.query.id}}` > 接收参数 `{{$route.query.id}}`
#### 跳转路由并携带参数
```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. 命名路由 ### 4. 命名路由
```javascript ```javascript
routes:[ routes:[
{ { path:'/about', component:AboutBody },
path:'/about',
component:AboutBody
},
{ {
path:'/home', path:'/home',
component:HomeBody, component:HomeBody,
children:[ children:[
{ { path:'news', component:HomeChild },
path:'news',
component:HomeChild
},
{ {
path:'message', path:'message',
component:HomeChild1, component:HomeChild1,
//多级路由 //多级路由
children:[ children:[
{ { name:'richu', path:'mes', component:HomeMessage }
name:'richu',
path:'mes',
component:HomeMessage
}
] ]
} }
] ]
} }
] ]
``` ```
> 使用 使用
>
> :to="{ ```html
> name:'', <router-link :to="{
> path:'/home/message/mes', name:'',
> path:'/home/message/mes',
> ​ query:{id:item.id, ​ query:{ id:item.id,title:item.mes }
> }">
> ​ title:item.mes ```
>
> ​ }
>
> }"
### 5.params参数的使用 ### 5.params参数的使用
1.声明接收 #### 1. 声明接收
```javascript ```javascript
children:[ children:[
@@ -921,7 +947,7 @@ children:[
] ]
``` ```
2.传递 #### 2. 传递
```html ```html
<li v-for="item of data" :key="item.id"> <li v-for="item of data" :key="item.id">
@@ -933,7 +959,7 @@ children:[
</li> </li>
``` ```
3.接收 #### 3. 接收
```html ```html
<li>编号{{$route.params.id}}</li> <li>编号{{$route.params.id}}</li>
@@ -942,10 +968,19 @@ children:[
### 6.props的使用 ### 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值为对象，该对象中所有的key-value的组合最终都会通过props传给Detai1组件
// props:{a:900] // props:{a:900]
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detai1组件 //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detai1组件
@@ -955,27 +990,21 @@ 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.作用：控制路由跳转时操作浏览器历史记录的模式 1. 作用：控制路由跳转时操作浏览器历史记录的模式
> 2. 浏览器的历史记录有两种写入方式：分别为 push和replace,默认为push
> 2.浏览器的历史记录有两种写入方式：分别为 push和replace,默认为push 3. 如何开启replace 模式： `push` 是追加历史记录,`replace` 是替换当前记录[路由跳转时候 `<router-link replace>News\</router-link>`]
>
> 3.如何开启replace 模式：
>
> push是追加历史记录,
>
> replace 是替换当前记录[路由跳转时候\<router-link replace>News\</router-link>]
### 7. 编程式路由导航 ### 7. 编程式路由导航
1.作用：不借助router-link实现路由跳转，让跳转更加灵活 作用：不借助router-link实现路由跳转，让跳转更加灵活
2.具体编码：
```javascript ```javascript
//$router的两个API
this.$router.push({ this.$router.push({
name:'xiangqing', name:'xiangqing',
params:{ params:{
@@ -998,9 +1027,7 @@ this.$router.go(3);
### 8.缓存路由组件 ### 8.缓存路由组件
> 让不展示的路由组件保持挂载，不被销毁 让不展示的路由组件保持挂载，不被销毁，示例：
> 具体编码
```html ```html
<keep-alive include="news"> <keep-alive include="news">
@@ -1008,22 +1035,20 @@ this.$router.go(3);
</keep-alive> </keep-alive>
``` ```
> include里面写模块名,用于保存指定的模块 - `include` 里面写模块名,用于保存指定的模块
### 9.新生命周期钩子 ### 9.新生命周期钩子
> 作用：路由组件独有的，用于捕获路由组件的激活状态 > 作用：路由组件独有的，用于捕获路由组件的激活状态
activated 路由组件被激活时触发 - `activated` 路由组件被激活时触发
- `deactivated` 路由组件失活时触发
deactivated 路由组件失活时触发
## 路由守卫 ## 路由守卫
#### 1.前置路由守卫 ### 1.前置路由守卫
```javascript ```javascript
/* 前置路由 */
route.beforeEach((from,to,next)=>{ route.beforeEach((from,to,next)=>{
if (to.meta.isAuth){ if (to.meta.isAuth){
alert("1"); alert("1");
@@ -1034,17 +1059,20 @@ route.beforeEach((from,to,next)=>{
}) })
``` ```
#### 2.后置路由守卫 前置路由
### 2.后置路由守卫
```javascript ```javascript
/* 后置路由 */
route.afterEach((from,to)=>{ route.afterEach((from,to)=>{
console.log(to); console.log(to);
document.title=from.meta.title; document.title=from.meta.title;
}) })
``` ```
#### 3.独享路由守卫 后置路由
### 3.独享路由守卫
```javascript ```javascript
{ {
@@ -1057,21 +1085,25 @@ route.afterEach((from,to)=>{
}, },
``` ```
> 独享路由守卫只有前置路由守卫没有后置路由守卫 独享路由守卫只有前置路由守卫没有后置路由守卫
#### 4.组件内路由守卫 ### 4.组件内路由守卫
通过路由规则，进入该组件时被调用
```javascript ```javascript
/* 通过路由规则，进入该组件时被调用 */
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
// ... // ...
},
/* 通过路由规则，离开组件时被调用 */
beforeRouteLeave (to, from, next) {
// ...
} }
``` ```
通过路由规则，离开组件时被调用
```js
beforeRouteLeave (to, from, next) {
// ...
}
```
Vue 中使用 TypeScript Vue 中使用 TypeScript
--- ---