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
2024-09-25 23:53:15 +08:00
parent ade6fbe3d0
commit 5ffc6faf3d
1 changed files with 352 additions and 0 deletions
--- a/docs/vue.md
+++ b/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
 ---