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>