skyblued 2 vuotta sitten
vanhempi
commit
f0e77c66a7
1 muutettua tiedostoa jossa 12 lisäystä ja 6 poistoa
  1. 12 6
      src/views/index/index.tsx

+ 12 - 6
src/views/index/index.tsx

@@ -1,7 +1,7 @@
 import TheFooterApp from "@/components/TheFooterApp";
 import { Button, Sticky, Swipe, SwipeItem, Tab, Tabs } from "vant";
 import { defineComponent, KeepAlive, ref, watch } from "vue";
-import { RouterView, useRoute } from "vue-router";
+import { RouterView, useRoute, useRouter } from "vue-router";
 import TheHeader from "../../components/TheHeader";
 import Down from "../down";
 import Home from "../home";
@@ -13,8 +13,10 @@ export default defineComponent({
   name: "indexApp",
   setup() {
     const route = useRoute();
+    const router = useRouter();
     const active = ref(route.name as string);
     watch(route, () => [(active.value = route.name as string)]);
+    console.log(route.name)
     return () => (
       <div class={styles.layout}>
         <div class={styles.sticky}>
@@ -22,24 +24,28 @@ export default defineComponent({
         </div>
         <Tabs
           class={styles.tabs}
-          active={active.value}
+          v-model:active={active.value}
           color="var(--van-primary-color)"
           line-width="26px"
           swipeable
           animated
           sticky
           offset-top="1.46667rem"
+          onChange={(name) => {
+            const url = name === 'home' ? '/' : '/' + name
+            router.replace({path: url})
+          }}
         >
-          <Tab to="/" title="首页" name="home">
+          <Tab title="首页" name="home">
             <Home />
           </Tab>
-          <Tab to="/music" title="谱库" name="music">
+          <Tab title="谱库" name="music">
             <Music />
           </Tab>
-          <Tab to="/video" title="视频" name="video">
+          <Tab title="视频" name="video">
             <Video />
           </Tab>
-          <Tab to="/down" title="下载" name="down">
+          <Tab title="下载" name="down">
             <Down />
           </Tab>
         </Tabs>