docs: update vue.md (#832)
* doc:update docs/flutter.md * docs:update docs/flutter.md * docs:update docs/flutter.md * docs:update vue.md & flutter.md
This commit is contained in:
richu94
352
docs/vue.md
352
docs/vue.md
@@ -721,6 +721,358 @@ const value = inject(ProvideKey)
|
||||
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
## 路由
|
||||
|
||||
### 1.路由的基本使用
|
||||
|
||||
1.开启命名空间后，组件中读取state数据:
|
||||
|
||||
```javascript
|
||||
//方式一：自己直接读取
|
||||
this.$store.state.personAbout.list
|
||||
|
||||
//方式二：借助mapState读取：
|
||||
...mapState('countAbout',['sum','school','subject']),
|
||||
```
|
||||
|
||||
2.开启命名空间后，组件中读取getters数据:
|
||||
|
||||
```javascript
|
||||
//方式一：自己直接读取
|
||||
this.$store.getters['personAbout/firstPersonName']
|
||||
//方式二：借助mapGetters读取：
|
||||
...mapGetters('countAbout',['bigSum'])
|
||||
```
|
||||
|
||||
3.开启命名空间后，组件中调用dispatch
|
||||
|
||||
```javascript
|
||||
//方式一：自己直接dispatch
|
||||
this.$store.dispatch('personAbout/addPersonWang',person)
|
||||
//方式二：借助mapActions:
|
||||
...mapActions('countAbout',{incrementOdd:'jia0dd',incrementWait:'jiaWait'})
|
||||
```
|
||||
|
||||
4.开启命名空间后，组件中调用commit
|
||||
|
||||
```javascript
|
||||
//方式一：自己直接commit
|
||||
this.$store.commit('personAbout/ADD_PERSON',person)
|
||||
//方式二：借助mapMutations:
|
||||
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
|
||||
```
|
||||
|
||||
### 2.路由的使用
|
||||
|
||||
```javascript
|
||||
import VueRouter from 'vue-router'
|
||||
//引入Luyou 组件
|
||||
import About from '../components/About'
|
||||
import Home from '../components/Home'
|
||||
//创建router实例对象，去管理一组一组的路由规则
|
||||
const router = new VueRouter({
|
||||
routes:[
|
||||
path:'/about',
|
||||
component:About
|
||||
path:'/home',
|
||||
component:Home
|
||||
})
|
||||
//暴露router
|
||||
export default router
|
||||
```
|
||||
|
||||
4.实现切换（active-class可配置高亮样式）
|
||||
|
||||
\<router-link active-class="active" to="/about">About\</router-link>
|
||||
|
||||
5.指定展示位置
|
||||
|
||||
\<router-diew>\</router-view>
|
||||
|
||||
>几个注意点
|
||||
>
|
||||
>1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
|
||||
>
|
||||
>2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
|
||||
>
|
||||
>3.每个组件都有自己的$route属性，里面存储着自己的路由信息。
|
||||
>
|
||||
>4.整个应用只有一个router，可以通过组件的srouter 属性获取到。
|
||||
|
||||
### 3.路由的query
|
||||
|
||||
```html
|
||||
<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
|
||||
}
|
||||
}"
|
||||
>{{item.mes}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'HomeChild1',
|
||||
data() {
|
||||
return {
|
||||
data:[
|
||||
{id:1,mes:"消息1"},
|
||||
{id:2,mes:"消息2"},
|
||||
{id:3,mes:"消息3"}
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list{
|
||||
margin-left:80px;
|
||||
}
|
||||
.link{
|
||||
color: orange;
|
||||
text-decoration: none;
|
||||
background-color: skyblue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
> 接收参数 `{{$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
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
```
|
||||
|
||||
> 使用
|
||||
>
|
||||
> :to="{
|
||||
> name:'',
|
||||
> path:'/home/message/mes',
|
||||
>
|
||||
> query:{id:item.id,
|
||||
>
|
||||
> title:item.mes
|
||||
>
|
||||
> }
|
||||
>
|
||||
> }"
|
||||
|
||||
### 5.params参数的使用
|
||||
|
||||
1.声明接收
|
||||
|
||||
```javascript
|
||||
children:[
|
||||
{
|
||||
name:'richu',
|
||||
path:'mes/:id/:title',
|
||||
component:HomeMessage
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
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}}
|
||||
</router-link>
|
||||
</li>
|
||||
```
|
||||
|
||||
3.接收
|
||||
|
||||
```html
|
||||
<li>编号{{$route.params.id}}</li>
|
||||
<li>标题{{$route.params.title}}</li>
|
||||
```
|
||||
|
||||
### 6.props的使用
|
||||
|
||||
```javascript
|
||||
7.路由的props配置
|
||||
作用：让路由组件更方便的收到参数
|
||||
name:'xiangqing',path:'detail/:id',component:Detail,
|
||||
//第一种写法：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
|
||||
```
|
||||
|
||||
> \<router-link>的replace属性
|
||||
>
|
||||
> 1.作用：控制路由跳转时操作浏览器历史记录的模式
|
||||
>
|
||||
> 2.浏览器的历史记录有两种写入方式：分别为 push和replace,默认为push
|
||||
>
|
||||
> 3.如何开启replace 模式：
|
||||
>
|
||||
> push是追加历史记录,
|
||||
>
|
||||
> replace 是替换当前记录[路由跳转时候\<router-link replace>News\</router-link>]
|
||||
|
||||
### 7.编程式路由导航
|
||||
|
||||
1.作用：不借助router-link实现路由跳转，让跳转更加灵活
|
||||
2.具体编码：
|
||||
|
||||
```javascript
|
||||
//$router的两个API
|
||||
this.$router.push({
|
||||
name:'xiangqing',
|
||||
params:{
|
||||
id:xxx,
|
||||
title:xxx
|
||||
//实现路由跳转，让路由跳转更加灵活
|
||||
}
|
||||
})
|
||||
this.$router.replace({
|
||||
name:'xiangqing',
|
||||
params:{
|
||||
id:xxx,
|
||||
title:xxx
|
||||
}
|
||||
})
|
||||
this.$router.forward();
|
||||
this.$router.back();
|
||||
this.$router.go(3);
|
||||
```
|
||||
|
||||
### 8.缓存路由组件
|
||||
|
||||
> 让不展示的路由组件保持挂载，不被销毁
|
||||
|
||||
> 具体编码
|
||||
|
||||
```html
|
||||
<keep-alive include="news">
|
||||
<router-view></router-view>
|
||||
</keep-alive>
|
||||
```
|
||||
|
||||
> include里面写模块名,用于保存指定的模块
|
||||
|
||||
### 9.新生命周期钩子
|
||||
|
||||
> 作用：路由组件独有的，用于捕获路由组件的激活状态
|
||||
|
||||
activated 路由组件被激活时触发
|
||||
|
||||
deactivated 路由组件失活时触发
|
||||
|
||||
## 路由守卫
|
||||
|
||||
#### 1.前置路由守卫
|
||||
|
||||
```javascript
|
||||
/* 前置路由 */
|
||||
route.beforeEach((from,to,next)=>{
|
||||
if (to.meta.isAuth){
|
||||
alert("1");
|
||||
next();
|
||||
}else{
|
||||
next();
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
#### 2.后置路由守卫
|
||||
|
||||
```javascript
|
||||
/* 后置路由 */
|
||||
route.afterEach((from,to)=>{
|
||||
console.log(to);
|
||||
document.title=from.meta.title;
|
||||
})
|
||||
```
|
||||
|
||||
#### 3.独享路由守卫
|
||||
|
||||
```javascript
|
||||
{
|
||||
path:'news',
|
||||
component:HomeChild,
|
||||
meta:{title:"新闻"},
|
||||
beforeEnter: (from,to,next)=>{
|
||||
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
> 独享路由守卫只有前置路由守卫没有后置路由守卫
|
||||
|
||||
#### 4.组件内路由守卫
|
||||
|
||||
```javascript
|
||||
/* 通过路由规则，进入该组件时被调用 */
|
||||
beforeRouteEnter (to, from, next) {
|
||||
// ...
|
||||
},
|
||||
/* 通过路由规则，离开组件时被调用 */
|
||||
beforeRouteLeave (to, from, next) {
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Vue 中使用 TypeScript
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user