Vue路由

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页应用（SPA, Single Page Application）。它允许你通过定义不同的路由规则，将不同的 URL 映射到对应的组件，实现页面之间的无刷新跳转。

---

## 🚀 一、Vue Router 的基本使用

### 1. 安装 Vue Router

如果你使用的是 Vue 3，可以通过以下方式安装：

```bash
npm install vue-router@4
```

如果是 Vue 2，则使用：

```bash
npm install vue-router@3
```

---

### 2. 创建路由配置

在 `src/router/index.js` 中创建路由配置：

```js
// src/router/index.js
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 中引入并挂载路由

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

createApp(App).use(router).mount('#app')
```

---

### 4. 在 App.vue 中使用 `<router-view>`

```vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view />
  </div>
</template>
```

---

## 🧩 二、Vue Router 的核心概念

| 概念 | 说明 |
|------|------|
| **Route** | 一个 URL 路径对应的一个“页面”或“视图”。 |
| **Component** | 对应路径的组件。 |
| **Router** | 管理所有路由的实例。 |
| **router-link** | 用于导航的链接组件，类似于 `<a>` 标签。 |
| **router-view** | 用于显示匹配路由的组件。 |
| **params / query** | 可以传递参数给路由。 |

---

## 📦 三、动态路由与参数传递

### 1. 动态路由（带参数）

```js
{
  path: '/user/:id',
  name: 'User',
  component: User
}
```

在组件中获取参数：

```js
// User.vue
export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}
```

### 2. 使用 `query` 传递参数

```js
this.$router.push({ path: '/user', query: { id: 123 } })
```

在路由中：

```js
{
  path: '/user',
  name: 'User',
  component: User
}
```

在组件中获取：

```js
this.$route.query.id
```

---

## 🧩 四、嵌套路由（Nested Routes）

```js
{
  path: '/user/:id',
  component: User,
  children: [
    {
      path: 'profile',
      component: Profile
    },
    {
      path: 'posts',
      component: Posts
    }
  ]
}
```

访问路径：`/user/123/profile`

---

## 🧩 五、编程式导航

```js
this.$router.push('/about') // 导航到 about 页面
this.$router.replace('/home') // 替换当前页面
this.$router.go(1) // 后退一页
```

---

## 🧩 六、路由守卫（Navigation Guards）

### 1. 全局前置守卫

```js
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})
```

### 2. 组件内守卫

```js
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 在进入该组件前调用
    })
  }
}
```

---

## ✅ 七、Vue Router 与 Vue 3 的兼容性

- Vue 3 使用 `createRouter` 和 `createWebHistory`。
- Vue 2 使用 `new VueRouter({ ... })`。

---

## 📘 八、参考文档

- [Vue Router 官方文档](https://router.vuejs.org/zh/)

---

如果你有具体的使用问题，比如：
- 如何实现权限控制？
- 如何实现懒加载路由？
- 如何处理路由嵌套？

欢迎继续提问！