chroe：使用RequestLoading组件

src/layout/index.vue

@@ -1,34 +1,33 @@
 <script setup lang="ts">
-import { ref, reactive, toRefs  } from 'vue'
+import { ref, reactive, toRefs } from "vue";
 
 //底部tab栏相关
 const useTabBar = () => {
   const state = reactive({
     tabBar: [
       {
-				title: '首页',
+        title: "首页",
         to: {
-					name: 'Home'
+          name: "Home",
         },
-				icon: 'home-o'
+        icon: "home-o",
       },
       {
-				title: '我',
+        title: "我",
         to: {
-					name:'About'
+          name: "About",
         },
-				icon: 'user-o'
+        icon: "user-o",
-			}
+      },
-        ]
+    ],
-    })
+  });
-    return toRefs(state)
+  return toRefs(state);
-}
+};
-const { tabBar } = useTabBar()
+const { tabBar } = useTabBar();
 
 const handleChange = (value) => {
   // console.log(value,'valueeeeeee');
-}
+};
-
 </script>
 
 <template>
@@ -38,6 +37,7 @@ const handleChange = (value) => {
         <router-view></router-view>
       </keep-alive>
       <router-view v-else></router-view>
+      <RequestLoading></RequestLoading>
     </div>
     <div class="layout-footer">
       <TabBar :data="tabBar" @chang="handleChange"></TabBar>
@@ -46,5 +46,4 @@ const handleChange = (value) => {
 </template>
 
 <style lang="scss" scoped>
-
 </style>