了解Vue 项目结构

vue_alpha/
├── node_modules/         # 存放依赖的文件夹
├── public/               # 存放静态文件，如 index.html
├── src/                  # 存放源代码
│   ├── assets/           # 存放图片、样式等静态资源
│   ├── components/       # 存放 Vue 组件
│   ├── App.vue           # 根组件
│   ├── main.js           # Vue 实例的入口文件
│   └── router.js         # Vue Router 配置（如果使用了）
├── package.json          # 项目配置文件
└── vue.config.js         # 可选，Vue CLI 配置文件

Vue Router 是 Vue 官方提供的路由管理库，专门用于在 Vue.js 中实现页面间的导航和 URL 路由功能。它能够帮助你：

1. 管理不同页面的路由：当用户点击某个链接时，Vue Router 会根据 URL 路由规则显示相应的页面组件。

2. 动态切换视图：例如，当你点击左侧导航栏的不同项时，Vue Router 会加载并展示对应的组件内容，而无需刷新整个页面。

3. 支持 URL 路由：为每个视图定义唯一的 URL，允许用户通过浏览器地址栏访问和分享不同的页面。

4. 前端路由：页面跳转和数据更新通常发生在前端，而不是通过重新加载页面，这使得应用更加流畅和高效。

 

在项目根目录运行以下命令，来检查是否已安装 vue-router：

npm list vue-router

 

如果输出类似下面的内容，说明 Vue Router 已经安装：

如果没有安装，命令行会显示类似 -- (empty)，这表示没有安装 vue-router。

 

手动安装命令 _{vue和vue-router需要版本兼容，Vue 2.x 搭配 Vue Router（v3.x）}

npm install vue-router@3