vue3如何设置router.component

在 Vue 3 中，使用 `createRouter` 创建路由器实例后，可以使用 `routes` 属性来定义路由规则。每个路由规则是一个对象，其中 `component` 属性可以指定该路由需要渲染的组件。

示例代码如下：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

在上面的示例中，我们定义了两个路由规则，分别对应 Home 和 About 两个组件。`component` 属性指定了需要渲染的组件。在组件中，我们可以通过 `$route` 对象获取当前路由信息，例如 `$route.path` 获取当前路由的路径。