Vue Router 基础知识：快速搭建你的第一个路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。一个单页面应用（SPA）只有一个 HTML 页面，所有的交互和导航都在这个页面上完成，而 Vue Router 负责管理这些不同的视图和它们之间的切换。本文将深入浅出地讲解 Vue Router 的基础知识，并引导你快速搭建你的第一个路由应用。

一、为什么需要路由？

在传统的网页应用中，用户点击一个链接会向服务器发送请求，服务器返回一个新的 HTML 页面。这种方式会导致页面频繁刷新，用户体验不佳。而 SPA 只需要在第一次加载时请求一个 HTML 页面，后续的交互和导航都通过 JavaScript 动态更新页面内容，从而实现更流畅的用户体验。路由管理器就是负责管理这些不同的视图，以及它们之间如何切换的工具。

二、安装和配置 Vue Router

在你的 Vue.js 项目中，你可以通过 npm 或 yarn 安装 Vue Router：

```bash
npm install vue-router@4

或

yarn add vue-router@4
```

安装完成后，需要创建一个路由实例并将其挂载到 Vue 应用上。

```javascript
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
{
path: '/', // 路由路径
name: 'home', // 路由名称
component: HomeView // 对应的组件
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/ webpackChunkName: "about" / '../views/AboutView.vue')
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL), // 使用 history 模式
routes // 路由配置
})

export default router
```

然后，在你的 main.js 文件中引入并使用路由实例：

```javascript
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router) // 使用路由
app.mount('#app')
```

三、路由的基本概念

• 路由配置 (routes): 一个包含多个路由对象的数组。每个路由对象定义了一个路由的路径、名称以及对应的组件。
• 路由路径 (path): URL 中的路径部分，用于匹配不同的路由。
• 路由名称 (name): 给路由起一个名字，方便在代码中引用。
• 组件 (component): 与路由对应的 Vue 组件。
• 路由参数: 动态路由片段，可以在路由路径中传递参数。

四、导航

Vue Router 提供了多种方式进行导航：

• <router-link> 组件: 这是在模板中进行导航的首选方式。它会渲染成一个 <a> 标签，并根据路由配置自动生成链接。

vue
<template>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</template>

• router.push() 方法: 在 JavaScript 代码中进行导航。

```javascript
// 跳转到 home 路由
this.$router.push('/')

// 跳转到 about 路由，并传递参数
this.$router.push({ name: 'about', params: { id: 1 } })

// 使用 query 参数
this.$router.push({ path: '/about', query: { page: 2 } })
```

• router.replace() 方法: 类似于 push()，但不会向 history 添加新记录。

• router.go() 方法: 在 history 中前进或后退。

五、动态路由匹配

在实际应用中，我们经常需要根据不同的参数动态渲染页面内容。Vue Router 提供了动态路由匹配的功能，可以在路由路径中定义参数。

javascript
const routes = [
{
path: '/users/:id', // :id 为动态参数
name: 'user',
component: User
}
]

在组件中，可以通过 $route.params 获取路由参数：

```vue

```

六、嵌套路由

对于复杂的应用，我们可以使用嵌套路由来组织页面结构。嵌套路由允许你在一个父路由下定义子路由，从而实现更清晰的代码结构。

javascript
const routes = [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile', // 子路由路径相对于父路由
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]

在父组件中，可以使用 <router-view> 组件来渲染子路由对应的组件：

```vue

```

七、导航守卫

导航守卫允许你在路由导航过程中执行一些逻辑，例如权限验证、数据获取等。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫三种类型的导航守卫。

```javascript
// 全局前置守卫
router.beforeEach((to, from, next) => {
// ...
next() // 继续导航
})

// 路由独享守卫
const routes = [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
// ...
next()
}
}
]

// 组件内守卫
export default {
beforeRouteEnter (to, from, next) {
// ...
next()
}
}
```

八、总结

本文介绍了 Vue Router 的基本概念、安装配置、导航方式、动态路由匹配、嵌套路由以及导航守卫等核心知识。通过学习这些知识，你可以快速搭建一个基于 Vue.js 的单页面应用，并实现复杂的路由功能. 熟练掌握 Vue Router 是构建现代 Web 应用的关键技能之一。希望本文能帮助你更好地理解和应用 Vue Router。 记住，实践出真知，动手尝试构建一些简单的应用，能够更有效地巩固你的学习成果。 此外，Vue Router 的官方文档也提供了更详细的说明和示例，建议你深入阅读并探索更多高级特性。