vue3-ts路由配置
时间: 2023-08-13 17:12:08 浏览: 59
在 Vue 3 中使用 TypeScript 进行路由配置的方法如下:
1. 首先,安装 Vue Router 和 TypeScript 的类型声明文件(如果尚未安装):
```bash
npm install vue-router
npm install @types/vue-router --save-dev
```
2. 在项目的根目录下创建一个 `router` 文件夹,并在其中创建一个 `index.ts` 文件。
3. 在 `index.ts` 中,引入必要的依赖和声明路由的配置:
```typescript
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// 导入各个路由的组件
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import NotFound from '../views/NotFound.vue';
// 定义路由配置
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: NotFound,
},
];
// 创建路由实例
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
```
4. 在主入口文件(通常是 `main.ts`)中,引入 `router` 并将其挂载到 Vue 应用中:
```typescript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');
```
这样,你就完成了 Vue 3 中使用 TypeScript 进行路由配置的步骤。请根据自己的需求修改路由的配置和组件路径。