Vue 3為我們帶來了許多令人興奮的新功能和更新。其中一個最重要的更新是其路由組件功能。在Vue 2之前，我們必須使用Vue-Router來實現路由功能。但是Vue 3現在已經將此功能集成到其核心代碼庫中。

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router

如上所示，我們可以通過引入createRouter和createWebHistory等工具來創建我們的路由。然后我們定義了兩個路由指向我們的Home和About組件。創建一個路由實例后，我們需要將其導出，以便可以在應用程序中使用。

使用Vue 3的路由組件功能，我們可以通過vue-router指令來控制路由。例如，我們可以使用<router-link>標簽來路由到其他頁面：

<template>
<div>
<h1>This is the Home page.</h1>
<router-link to="/about">Go to About page</router-link>
</div>
</template>

如上所示，我們可以使用to屬性指定我們要鏈接到的路由地址。一旦用戶單擊鏈接，路由就會自動更新并呈現我們定義的組件。

總之，Vue 3的路由組件功能是Vue框架的一個重要更新。通過使用它，我們可以輕松地實現和管理應用程序中的路由。