Vue
### Vue 组件间跳转（中文说明）
在 Vue（特别是 Vue 3 + Vue Router）中，**组件间跳转通常指的是页面（视图）之间的导航**，也就是从一个组件（页面）跳转到另一个组件（页面）。这种跳转一般是通过 **路由（vue-router）** 实现的。
---
## 一、前提：使用 Vue Router（vue-router 4.x，适配 Vue 3）
如果你的项目是 Vue 3，那么你应该使用的是 **vue-router 4**。
### 1. 安装 vue-router（如未安装）
```bash
npm install vue-router@4
```
---
## 二、基本用法：组件间跳转（路由跳转）
### 1. 配置路由（router/index.js 或 router/index.ts）
```javascript
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Login from '@/views/Login.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/login', component: Login },
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
### 2. 在 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')
```
---
### 3. 在App.vue中放router-view
```javascript
Home
About
`（声明式导航，推荐用于 a 标签式跳转）
```vue
跳转到关于页
带参数跳转
```
🔹 特点：类似 `` 标签，SEO 友好，用户可右键打开等。
---
### ✅ 方式 2：使用编程式导航（JS 代码控制跳转，比如按钮点击跳转）
在 Vue 组件中，通过 `useRouter()` 进行路由跳转：
```vue
```
🔹 `router.push()`：跳转到新路由，保留当前历史记录，可返回
🔹 `router.replace()`：替换当前路由，不可返回（类似 HTTP 301）
🔹 `router.go(n)`：前进后退，如 `router.go(-1)` 返回上一页
---
## 四、获取路由参数
### 1. 通过 query 传参（即 ?id=123）
跳转时：
```javascript
router.push({ path: '/user', query: { id: 123 } })
```
接收参数（在目标组件中）：
```vue
```
---
### 2. 通过 params 传参（需配合命名路由，通常用于 ID 类路径 /user/1）
路由配置：
```javascript
{ path: '/user/:id', name: 'user', component: User }
```
跳转时：
```javascript
router.push({ name: 'user', params: { id: 123 } }) // 跳转到 /user/123
```
接收参数：
```vue
```
⚠️ 注意：**params 不能与 path 一起使用**，必须配合 `name` 和动态路由配置。
---
## 五、总结：Vue 组件间跳转方式对比
| 方式 | 用法 | 适用场景 | 是否可返回 | 备注 |
|------|------|----------|-------------|------|
| `` | 声明式，模板中写 | 普通链接跳转 | ✅ 可返回 | 类似 ``，SEO 友好 |
| `router.push('/path')` | 编程式，JS 控制跳转 | 按钮点击跳转 | ✅ 可返回 | 最常用 |
| `router.push({ path, query })` | 带查询参数跳转 | 需要附参数但不改 URL 结构 | ✅ | 如：/user?id=123 |
| `router.push({ name, params })` | 带路径参数跳转 | /user/123 形式 | ✅ | 需路由配置 name 和动态段 |
| `router.replace()` | 替换当前路由 | 登录后跳转，不留历史 | ❌ 不可返回 | 类似 301 重定向 |
| `router.go(n)` | 前进后退 | 浏览器历史控制 | - | 如 go(-1) 返回上页 |
---
✅ **推荐做法：**
- 一般页面跳转使用 `` 或 `router.push()`
- 带参数推荐使用 `query`（简单直观）或 `params`（路径美观，如 /user/1）
- 使用 `useRouter()` 和 `useRoute()` 来控制与获取路由信息
---
如你有具体场景（比如登录后跳转首页、传递用户 ID 等），可以进一步给出代码示例。