Vue 3 项目中路由的完整实践：从安装到页面展示

前言

Vue 3 对应的路由版本是 vue-router 4

一、安装？

npm install vue-router@4

二、创建并配置路由

1. 推荐的项目目录结构

src/
├─ router/
│ └─ index.ts
├─ views/
│ ├─ Home
| |----index.vue
│ └─ Login
| |---- |----index.vue
├─ App.vue
└─ main.ts

router/index.ts：路由集中配置文件

views/：页面级组件（路由组件）

2.编写路由配置文件

import {createRouter,createWebHashHistory} from 'vue-router' import Layout from '../views/Main.vue' import Login from '../views/login/index.vue' const routes=[ { path:'/', component:Layout }, { path:'/login', component:Login } ] const router= createRouter({ routes, //路由匹配模式hash history:createWebHashHistory() }) export default router

createWebHistory()：使用 HTML5 History 模式，URL 更友好

routes：路由表，本质是一个数组

每个路由对象至少包含：path 和 component

三、挂载路由到应用实例

路由仅配置是不会生效的，必须显式挂载到 Vue 应用实例
修改 src/main.ts：

import { createApp } from 'vue' import './style.css' import App from './App.vue' import router from './router' const app =createApp(App) //路由的挂载 app.use (router) app.mount('#app')

忘记 app.use(router) → 页面始终不跳转

路由文件写对，但未引入 → 路由完全无效

四、路由展示：RouterView

路由的本质是 “根据 URL 显示不同组件”，而显示位置由 决定。
修改 App.vue

<script setup> </script> <template> <Router-view></Router-view> </template> <style scoped> </style>

是路由的出口

当前地址匹配到哪个路由，就渲染哪个组件

一个应用至少需要一个 router-view

总结

Vue 3 必须使用 vue-router@4

路由配置 ≠ 路由生效，必须 app.use(router)

页面展示依赖

页面组件建议统一放在 views/ 目录

在真实项目（如后台管理系统）中，路由通常还会涉及：

Layout 布局路由

嵌套路由 / 子路由

路由守卫（登录鉴权）

动态路由（菜单权限）

404 / 重定向配置