vue3+vite+ts如何使用路由

一：安装路由依赖包

npm install vue-router@4

二：创建视图组件

在src/views中创建视图组件，例如 src/views/home.vue

<template><div>我是Home主页面</div>
</template>

三：配置路由

在src目录中创建一个路由配置文件。如 src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/home/index.vue';
const routes: Array<RouteRecordRaw> = [{path: '/',name: 'home',component: Home,},// 更多路由...
];const router = createRouter({history: createWebHistory(),routes
});export default router;

四：引入路由

在 src/main.ts 文件中引入路由并挂载到 Vue 实例上

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
const app = createApp(App)
app.use(router);
app.mount('#app')

五：使用路由

在 App.vue 中使用 <router-view> 组件来渲染路由视图。

<template><!-- 渲染当前路由对应的视图 --><router-view/>
</template>