什么是 Vue Router？·用起来很方便·Vue Router 是 Vue.js 的官方路由管理器
作者：机器人技术佬 |
发布时间：2025-06-20 |
什么是 Vue Router？
Vue Router 是 Vue.js 的官方路由管理器。简单来说，就是让 Vue 应用在单页应用（SPA）中能像多页面应用那样导航，用起来很方便。
怎么用 Vue Router？
用 Vue Router 就像做菜一样，有几个步骤要跟着来：
- 安装 Vue Router
- 创建路由配置
- 在 Vue 实例中引入和使用路由
下面我会详细给你说说每一步怎么操作。
一、安装 Vue Router
首先，你得像装软件一样安装 Vue Router。用 npm 或 yarn 就行了，命令是这样的：
```bash
npm install vue-router
```
或者
```bash
yarn add vue-router
```
这条命令会帮你把 Vue Router 安装到你的项目中。
二、创建路由配置
安装完之后，你需要在 Vue 应用中定义路由。先创建一个文件夹，叫路由配置，然后在里面创建一个路由配置文件，通常叫 `router.js`。在这个文件里，你定义哪些路径对应哪个组件：
```javascript
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
```
这个例子中定义了两个路由：一个首页和一个关于页。
三、在 Vue 实例中引入和使用路由
接下来，你需要在 Vue 应用的主文件里引入并使用这些路由。修改一下文件，让它看起来这样：
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
router
}).$mount('app');
```
这一步就像是把路由加入到你的 Vue 应用里，让它开始工作。
四、示例说明
接下来，我会给你展示一个完整的示例，教你如何使用 Vue Router：
1. 创建 Vue 应用：用 Vue CLI 创建一个新的 Vue 项目。
2. 安装 Vue Router：和之前一样，用 npm 或 yarn 安装它。
3. 创建路由配置：在 `router.js` 文件里定义你的路由。
4. 修改 Vue 主文件：引入并使用刚刚创建的路由配置。
5. 创建视图组件：创建你的首页和关于页的组件。
6. 在主文件中添加路由视图：用 `` 组件来显示你的路由对应的视图。
通过这些步骤，你就可以在 Vue 应用中集成 Vue Router 并定义基本的路由规则了。
五、
通过这篇指南，你已经了解了 Vue Router 是什么以及如何在 Vue 应用中使用它。Vue Router 很强大，能帮你轻松创建和管理单页应用。
建议你：
- 深入学习 Vue Router 的官方文档，了解更多高级用法。
- 在实际项目中尝试使用路由守卫和懒加载等技术。
- 定期更新依赖库，确保使用最新的 Vue Router。
继续学习和实践，你会成为一个 Vue Router 高手，打造出高质量的 Vue.js 应用。
相关问答（FAQs）
| 问题 |
答案 |
| vue-router 是什么？ |
Vue-router 是 Vue.js 官方提供的用于构建单页应用的路由管理器。 |
| 如何使用 vue-router？ |
首先安装 vue-router，然后在 Vue 实例中引入并配置路由表。 |
| vue-router 的优势是什么？ |
单页应用、组件化、导航控制、嵌套路由、状态管理等。 |