Vue3 核心：路由配置与使用

路由基础理解

在 Vue3 生态中，官方推荐的路由解决方案是 vue-router 4。它提供了声明式的导航机制，让单页应用（SPA）的页面切换变得流畅且易于管理。

路由配置

首先需要在项目中安装依赖，然后创建一个路由配置文件。这里我们使用 createRouter 来初始化路由实例，并指定历史模式为 createWebHistory。

import {
     createRouter,
     createWebHistory
} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

const router = createRouter({
     history: createWebHistory(),
     routes: [
         {
             path: '/home',
             component: Home
         },
         {
             path: '/about',
             component: About
         },
         {
             path: '/news',
             component: News
         }
     ]
})
export default router

注意这里补全了 News 组件的导入，因为后续模板中用到了 /news 路径，否则运行时会报错找不到组件。

主入口注册

路由实例创建好后，需要在应用的主入口文件中进行挂载。通常是在 main.ts 里调用 app.use(router)。

import router from './router/index'
 { createApp }  

 app = ()
app.(router)
app.()