vue3+ts如何给router.component赋值
时间: 2023-09-13 07:14:01 浏览: 41
在 Vue 3 中,使用 TypeScript 给路由组件赋值可以按照以下步骤进行:
1. 首先,安装 `vue-router` 和它的类型定义文件 `@types/vue-router`:
```
npm install vue-router @types/vue-router
```
2. 在 `router/index.ts` 中导入所需的组件和类型定义:
```typescript
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 定义路由的类型
type AppRouteRecordRaw = RouteRecordRaw & {
meta?: {
title: string
}
}
// 定义路由的数组类型
type AppRouteRecordRawArray = Array<AppRouteRecordRaw>
```
3. 创建路由实例并配置路由信息:
```typescript
const routes: AppRouteRecordRawArray = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title: '首页'
}
},
{
path: '/about',
name: 'About',
component: About,
meta: {
title: '关于我们'
}
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
// 在路由跳转时设置网页标题
router.beforeEach((to, from, next) => {
document.title = to.meta.title || '网站标题'
next()
})
export default router
```
在这个例子中,我们定义了 `AppRouteRecordRaw` 类型来扩展 `RouteRecordRaw` 类型,使我们可以在路由对象中添加元数据。然后,我们定义了 `AppRouteRecordRawArray` 类型来表示一个包含 `AppRouteRecordRaw` 对象的数组。最后,我们在路由对象中添加了 `meta` 属性,用于设置每个路由的网页标题。