|
@@ -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>
|