vue router 4 是 vue3 的官方路由库，需安装 vue-router@4、创建 router/index.js 配置文件、在 main.js 中通过 app.use(router) 挂载，并在 app.vue 中使用 渲染组件。
Vue Router 4 是 Vue3 的官方路由库，安装配置其实很直接，关键在于版本匹配和三步到位：装对、配好、挂上。只要按顺序操作，5 分钟就能让路由跑起来。
安装：确认 Vue3 后再装 vue-router@4
Vue3 必须搭配 Vue Router 4（不能用 @3 或 @latest），否则会报错或功能异常。在项目根目录执行：
- npm install vue-router@4（推荐，版本明确）
- 或 yarn add vue-router@4
- 不建议用
vue-router@next，它已不再指向稳定版
创建路由配置文件（src/router/index.js）
在 src 下新建 router 文件夹，再建 index.js，写入标准配置：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用
createRouter替代旧版的new VueRouter() -
history选createWebHistory()（无 # 号）或createWebHashHistory()（兼容老服务器，带 #） -
routes是数组，每个对象含path和component，推荐加name方便后续编程跳转
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
<p>const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About }
]</p><p>const router = createRouter({
history: createWebHistory(),
routes
})</p><p>export default router</p>
在 main.js 中挂载路由
打开 src/main.js，引入并使用刚写的 router 实例：
- 确保先
import router from './router' - 调用
app.use(router)，这一步不能漏，否则路由不生效 - 挂载顺序无关紧要，但必须在
app.mount()之前
在 App.vue 中添加路由出口
<router-view></router-view> 是页面内容的“插槽”，所有匹配到的组件都会渲染在这里：
- 把它放在
<template></template>的合适位置，比如主内容区 - 可配合
<router-link></router-link>做导航，例如：<router-link to="/about">关于</router-link> - 注意：不要写成
<router-view></router-view>自闭合写法更稳妥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
