【vuerouter入门】Vue Router 是 Vue.js 官方的路由管理器，用于构建单页应用（SPA）。它允许开发者通过不同的 URL 路径来展示不同的组件，而无需刷新页面。对于初学者来说，掌握 Vue Router 的基本用法是开发复杂前端项目的重要一步。
一、Vue Router 简介
| 项目 | 内容 |
| 名称 | Vue Router |
| 类型 | 单页应用路由管理器 |
| 作用 | 实现页面跳转、动态加载组件、参数传递等 |
| 依赖 | Vue.js（版本 2 或 3） |
| 安装方式 | `npm install vue-router` 或 `yarn add vue-router` |
二、Vue Router 基本使用步骤
1. 安装 Vue Router
```bash
npm install vue-router
```
2. 创建路由配置文件
通常在 `src/router/index.js` 中定义路由规则：
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
3. 在 main.js 中引入并挂载路由
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('app')
```
4. 在组件中使用 `
在 `App.vue` 中添加：
```vue
```
5. 导航链接使用 `
```vue
```
三、常用功能说明
| 功能 | 描述 | 示例 |
| 动态路由 | 根据参数变化加载不同组件 | `path: '/user/:id'` |
| 嵌套路由 | 在父路由中嵌套子路由 | 使用 `children` 属性 |
| 编程式导航 | 通过 JS 控制跳转 | `router.push('/about')` |
| 路由守卫 | 控制访问权限 | `beforeEach` 钩子函数 |
| 参数传递 | 通过 `params` 或 `query` 传递数据 | `to: { path: '/user', query: { id: 1 } }` |
四、总结
Vue Router 是构建现代 Vue 应用的核心工具之一，它提供了灵活的路由机制，支持动态加载、嵌套结构、参数传递等功能。对于初学者而言，掌握基础的路由配置和导航方式是关键。随着对 Vue Router 的深入理解，可以进一步学习高级特性如路由懒加载、导航守卫等，以提升应用性能与用户体验。
如果你正在开始一个 Vue 项目，建议尽早引入 Vue Router，并根据实际需求逐步扩展其功能。