doc: update docs/vue.md #832
This commit is contained in:
jaywcjlove
parent
88559b491c
commit
a74c7e2092
294
docs/vue.md
294
docs/vue.md
@ -723,81 +723,120 @@ 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
|
||||
|
||||
@ -805,22 +844,13 @@ export default router
|
||||
<template>
|
||||
<div>
|
||||
<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的对象写法 -->
|
||||
<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
|
||||
}
|
||||
query: { id:item.id, title:item.mes }
|
||||
}"
|
||||
>{{item.mes}}</router-link>
|
||||
</li>
|
||||
@ -846,9 +876,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list{
|
||||
margin-left:80px;
|
||||
}
|
||||
.list { margin-left:80px; }
|
||||
.link{
|
||||
color: orange;
|
||||
text-decoration: none;
|
||||
@ -859,57 +887,55 @@ export default {
|
||||
|
||||
> 接收参数 `{{$route.query.id}}`
|
||||
|
||||
### 4.命名路由
|
||||
#### 跳转路由并携带参数
|
||||
|
||||
```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. 命名路由
|
||||
|
||||
```javascript
|
||||
routes:[
|
||||
{
|
||||
path:'/about',
|
||||
component:AboutBody
|
||||
},
|
||||
routes:[
|
||||
{ path:'/about', component:AboutBody },
|
||||
{
|
||||
path:'/home',
|
||||
component:HomeBody,
|
||||
children:[
|
||||
{
|
||||
path:'news',
|
||||
component:HomeChild
|
||||
},
|
||||
{ path:'news', component:HomeChild },
|
||||
{
|
||||
path:'message',
|
||||
component:HomeChild1,
|
||||
//多级路由
|
||||
children:[
|
||||
{
|
||||
name:'richu',
|
||||
path:'mes',
|
||||
component:HomeMessage
|
||||
}
|
||||
{ name:'richu', path:'mes', component:HomeMessage }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
]
|
||||
```
|
||||
|
||||
> 使用
|
||||
>
|
||||
> :to="{
|
||||
> name:'',
|
||||
> path:'/home/message/mes',
|
||||
>
|
||||
> query:{id:item.id,
|
||||
>
|
||||
> title:item.mes
|
||||
>
|
||||
> }
|
||||
>
|
||||
> }"
|
||||
使用
|
||||
|
||||
```html
|
||||
<router-link :to="{
|
||||
name:'',
|
||||
path:'/home/message/mes',
|
||||
query:{ id:item.id,title:item.mes }
|
||||
}">
|
||||
```
|
||||
|
||||
### 5.params参数的使用
|
||||
|
||||
1.声明接收
|
||||
#### 1. 声明接收
|
||||
|
||||
```javascript
|
||||
children:[
|
||||
@ -921,7 +947,7 @@ children:[
|
||||
]
|
||||
```
|
||||
|
||||
2.传递
|
||||
#### 2. 传递
|
||||
|
||||
```html
|
||||
<li v-for="item of data" :key="item.id">
|
||||
@ -933,7 +959,7 @@ children:[
|
||||
</li>
|
||||
```
|
||||
|
||||
3.接收
|
||||
#### 3. 接收
|
||||
|
||||
```html
|
||||
<li>编号{{$route.params.id}}</li>
|
||||
@ -942,46 +968,49 @@ 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({
|
||||
@ -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
|
||||
---
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user