vue3+ts+vite创造路由

今天第一次用ts 搞了半天

1，在 Vue 3 + TypeScript 项目中配置路由，可以使用 Vue Router 4

pnpm install vue-router@4

2，在你的项目中创建一个路由配置文件，例如 src/router/index.ts

// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';

const routes: Array = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: About
    }
    // 其他路由
];

const router = createRouter({
    history: createWebHistory(), // 使用 HTML5 History 模式
    routes
});

export default router;

3，在你的主应用文件中（通常是 src/main.ts），引入并使用路由

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

4，在你的组件中，可以使用  和  来实现路由导航和显示