Vue Router基础配置三步：选对版本安装（Vue 3用vue-router@4）、编写router/index.js定义routes并创建路由实例、在main.js中通过.use(router)注册且App.vue含。

Vue Router 的安装和基础配置，核心就三步：选对版本装包、写好路由表、在主应用里挂上。关键不是堆代码，而是理清每个环节的作用和衔接点。

确认 Vue 版本，安装对应 vue-router

版本不匹配是新手最常踩的坑。2026 年主流项目基本是 Vue 3，所以默认用 vue-router@4：

• npm 安装：npm install vue-router@4
• yarn 安装：yarn add vue-router@4
• 装完检查 package.json，确认依赖里有 "vue-router": "^4.x"
• 如果是 Vue 2 项目（较少见），必须用 vue-router@3，命令末尾换成 @3

创建 router/index.js 配置文件

这个文件是路由系统的“地图”，定义路径和组件怎么对应：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 在 src/router/index.js 新建文件
• 导入 createRouter 和 createWebHistory
• 定义 routes 数组，每项包含 path 和 component，比如：
  { path: '/', component: () => import('../views/Home.vue') }
• 调用 createRouter({ history: createWebHistory(), routes }) 创建实例
• 最后 export default router

在 main.js 中注册并启用路由

光有地图不行，还得让整个应用“认路”：

• 打开 src/main.js
• 导入刚写的路由实例：import router from './router'
• 在 createApp(App) 链式调用中加入 .use(router)
• 确保 App.vue 模板里有 ，这是页面内容实际渲染的位置

加个导航链接试试效果

配置完别急着测跳转，先让页面能点起来：

• 在任意组件模板中写：关于
• 再配一条 /about 路由，指向一个简单组件（比如只有一句

  About Page

  ）
• 启动项目，点击链接，URL 变了且内容切换，说明基础路由已通

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！