路由-Tab切换页面

效果

代码结构

代码

router.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Page1 from '../views/Page1.vue'
import Page2 from '../views/Page2.vue'
import Page3 from '../views/Page3.vue'
​
const routes = [
  {
    path: '/page1',
    component: Page1
  },
  {
    path: '/page2',
    component: Page2
  },
  {
    path: '/page3',
    component: Page3
  }
]
​
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
​
export default router
​

app.vue

<template>
  <Tab />
  <router-view />
</template>
​
<script setup>
import Tab from '@/components/tab'
</script>
​
<style>
</style>

tab.vue

<template>
  <div class="tab">
    <router-link tag="div" to="/page1" class="tab-item">Page1</router-link>
    <router-link tag="div" to="/page2" class="tab-item">Page2</router-link>
    <router-link tag="div" to="/page3" class="tab-item">Page2</router-link>
  </div>
</template>