文章目录
- 前言
- 一、安装？
- 二、创建并配置路由
- 1. 推荐的项目目录结构
- 2.编写路由配置文件
- 每个路由对象至少包含：path 和 component
- 三、挂载路由到应用实例
- 四、路由展示：RouterView
- 总结
前言
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 routercreateWebHistory()：使用 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 / 重定向配置
