零基础如何通过Vue.js教程开发单页应用：路由配置+组件通信详解

是不是听说单页应用体验特别好，想自己用 Vue.js 做一个，却不知道从哪下手？点导航栏切换页面，内容没反应；好不容易配置好路由，却报 “Cannot find module './Home.vue'”；组件之间想传个数据，要么收不到，要么传过去是 undefined？其实啊，单页应用的核心就是路由跳转和组件通信，这俩搞懂了，开发起来就顺了。今天兔子哥就带零基础的朋友一步步做个单页应用，从路由配置到组件通信，每个步骤都讲透，保证看完就能动手！

一、先搞懂：单页应用到底是啥？为啥要用 Vue 开发？

场景痛点：“单页应用和普通网页有啥区别？学它有必要吗？”

打开普通网页，点导航会重新加载整个页面，白屏一下才出来内容；单页应用呢，点导航只换页面里的部分内容，不刷新整个页面，像用 APP 一样流畅。现在很多网站都是单页应用，比如网易云音乐网页版、掘金，体验确实好。

1. 单页应用的好处，新手也能感受得到

• 切换快：不用重新加载整个页面，点一下导航瞬间切换，用户体验好。
• 像 APP：操作起来和手机 APP 差不多，滚动、切换都很流畅。
• 开发方便：用 Vue 的组件化开发，页面拆成小块，重复使用还不乱。

Vue.js 天生就适合做单页应用，有专门的路由工具 vue-router，配置简单，新手也能很快上手。

2. 开发单页应用前，这些准备得做好

• 环境：还是用 Vite 创建 Vue 项目，之前学过基础的朋友应该都熟，命令行输npm create vite@latest my-spa -- --template vue，创建完装依赖启动。
• 装路由：单页应用必须用 vue-router，项目里输npm install vue-router@4（Vue3 用版本 4），装完就能配置路由了。

二、路由配置：让页面切换像翻书一样简单

场景问题：“配置路由时，页面总显示不出来，控制台还报错”

路由就是 “指路牌”，告诉 Vue 点导航时该显示哪个页面。新手配置路由常犯的错，无非是路径写错、组件没导入、路由没挂载这几点。

1. 从零配置路由，三步就能搞定

• 第 1 步：创建路由文件
  在 src 文件夹下建 router 文件夹，里面新建 index.js：
  javascript运行

  // src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'// 导入页面组件import Home from '../views/Home.vue'import About from '../views/About.vue'import Contact from '../views/Contact.vue'// 配置路由规则const routes = [{ path: '/', name: 'Home', component: Home }, // 首页{ path: '/about', name: 'About', component: About }, // 关于页{ path: '/contact', name: 'Contact', component: Contact } // 联系页]// 创建路由实例const router = createRouter({history: createWebHistory(), // 用HTML5历史模式，地址栏没有#routes})export default router

  
  
• 第 2 步：在 main.js 里挂载路由
  打开 src/main.js，导入并使用路由：
  javascript运行

  import { createApp } from 'vue'import App from './App.vue'import router from './router' // 导入路由createApp(App).use(router) // 挂载路由.mount('#app')

  
  
• 第 3 步：在 App.vue 里加导航和显示区域
  vue
  
  

这样点导航，页面就会在里切换，不用刷新整个页面，单页应用的基本效果就出来了！

2. 新手常踩的路由坑，提前避开

错误现象	原因	解决办法
路由跳转后页面空白，没报错	忘了加，内容没地方显示	在 App.vue 里加
报 “Failed to resolve component: router-link”	没在 main.js 里用 use (router) 挂载	检查 main.js 是否有.use(router)
组件路径没错，却报 “Cannot find module”	文件名大小写错了，比如导入 About.vue 写成 about.vue	确保导入路径和文件名大小写一致

兔子哥第一次配路由时，就是忘了在 main.js 里挂载，结果点导航没反应，折腾半小时才发现少了一行.use(router)，你可别犯这错。

三、组件通信：让组件之间能 “说话”，数据传得对

场景痛点：“组件之间想传个数据比登天还难，父传子收不到，子传父没反应”

单页应用里的组件像一个个独立的小模块，得让它们能互相传递数据才能协同工作。组件通信有好几种方式，不同场景用不同的方法。

1. 父子组件通信：最常用，也最简单

父组件给子组件传数据用 props，子组件给父组件传数据用 $emit，就像两个人扔球，一个扔一个接。

• 父传子（props）示例：
  子组件（Child.vue）：
  vue
  
  父组件（Home.vue）：
  vue
  
  
• 子传父（$emit）示例：
  子组件（Child.vue）：
  vue
  
  父组件（Home.vue）：
  vue
  
  

2. 非父子组件通信：用事件总线，简单直接

兄弟组件或隔代组件想通信，用事件总线最方便，就像建个广播电台，一个发一个收。

• 第 1 步：创建事件总线（bus.js）
  在 src 下建 utils/bus.js：
  javascript运行

  // src/utils/bus.jsimport { ref } from 'vue'const bus = ref(null)export default bus

  
  
• 第 2 步：组件 A 发送数据
  vue
  
  
• 第 3 步：组件 B 接收数据
  vue
  
  

四、自问自答：开发单页应用的关键问题

Q：“路由跳转时想传参数，比如点击列表项跳详情页，怎么传？”
A：用动态路由！在路由规则里加:id，比如{ path: '/detail/:id', component: Detail }，跳转时用to="/detail/123"，详情页里用$route.params.id就能拿到 123。
Q：“组件太多，通信方式记不住，有没有通用的方法？”
A：有！用 Pinia 状态管理，不管什么组件，都能直接读写 Pinia 里的数据，适合中大型项目。新手先掌握 props 和 $emit，再学 Pinia 会更顺。
Q：“单页应用部署后，刷新页面报 404 怎么办？”
A：这是路由历史模式的问题，服务器没配置 fallback 页面。如果用 nginx，在配置里加try_files $uri $uri/ /index.html;，让所有路径都指向 index.html 就行。
兔子哥觉得，开发单页应用最核心的就是理解 “路由管理页面切换，组件通信共享数据”。新手别一开始就追求复杂功能，先把这两个基础打牢，做个简单的多页面切换加数据传递，再慢慢加功能。
带过的学员里，有个零基础的朋友按这个方法，一周就做出了带路由和组件通信的单页应用，虽然简单，但页面切换流畅，数据传递也没问题。他说最大的心得是 “路由配置按步骤来，组件通信先分清楚谁传谁，别想太多复杂的”。其实编程就是这样，把大问题拆成小步骤，一步一步解决，再难的项目也能搞定。现在就打开你的 Vue 项目，试试配置路由和组件通信，你会发现单页应用开发真的没那么难！

标签： createWebHistory createRouter