安裝vue-router

pnpm install vue-router

配置

1.src/router/index.ts文件下的內容

import type { App } from 'vue'
import type { RouteRecordRaw } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'
import remainingRouter from './modules/remaining'// 創建路由實例
const router = createRouter({history: createWebHistory(import.meta.env.VITE_BASE_PATH), // createWebHashHistory URL帶#，createWebHistory URL不帶#strict: true,routes: remainingRouter as RouteRecordRaw[],scrollBehavior: () => ({ left: 0, top: 0 })
})export const setupRouter = (app: App<Element>) => {app.use(router)
}export default router

2.src/router/modules/remaining.ts

import HomeView from '../../views/HomeView.vue'
const remainingRouter= [{path: '/',name: 'home',component: HomeView,},{path: '/about',name: 'about',component: () => import('../../views/AboutView.vue'),},
]export default remainingRouter

3. main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 路由
import router, { setupRouter } from './router'
const setupAll = async () => {const app = createApp(App)setupRouter(app)await router.isReady()app.mount('#app')
}setupAll()

4.App.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script><template><header><div class="wrapper"><nav><RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink></nav></div></header><RouterView style="height: calc(100% - 1.5em)" />
</template><style scoped>
header {max-height: 100vh;line-height: 1.5;
}.logo {display: block;margin: 0 auto 2rem;
}nav {width: 100%;font-size: 12px;text-align: center;
}nav a.router-link-exact-active {color: var(--color-text);
}nav a.router-link-exact-active:hover {background-color: transparent;
}nav a {display: inline-block;padding: 0 1rem;border-left: 1px solid var(--color-border);
}nav a:first-of-type {border: 0;
}
</style>

5.src/views/AboutView.vue

<template><div> AboutView </div>
</template><script setup lang="ts">
defineOptions({ name: 'AboutView' })
</script><style lang="scss" scoped></style>

6.src/views/HomeView.vue

<template><div> HomeView </div>
</template><script setup lang="ts">
defineOptions({ name: 'HomeView' })
</script><style lang="scss" scoped></style>

文章demo參考github commit記錄

https://github.com/kingHjp/my-vite-create-vue3/tree/dev