# useNavigation 导航

提供路由导航、标签页管理和页面模式控制等功能。

## 基本用法

```vue
<template>
  <div>
    <el-button @click="handleEdit">编辑</el-button>
    <el-button @click="handleGoto">跳转新页面</el-button>
    <el-button @click="handleClose">关闭当前页</el-button>
  </div>
</template>

<script setup lang="ts">
import { useNavigation } from 'el-plus'

const { $goto, $closeTag, mode, setMode, isBrowse, isEdit, isAdd } = useNavigation({
  onModeChange: (newMode) => {
    console.log('模式变化:', newMode)
  }
})

// 编辑模式
const handleEdit = () => {
  setMode('edit')
}

// 跳转到新页面
const handleGoto = () => {
  $goto({
    name: 'detail',
    query: { id: '123' }
  })
}

// 关闭当前标签页
const handleClose = () => {
  $closeTag()
}
</script>
```

## 参数

### Config 配置

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| onModeChange | 模式变化时的回调函数 | `(mode: PageMode) => void` | - |

## 返回值

| 属性 | 说明 | 类型 |
|------|------|------|
| $goto | 打开新窗口或跳转路由 | `(config: NavigationConfig) => void` |
| $closeTag | 关闭当前标签页 | `() => void` |
| mode | 当前页面模式 | `ComputedRef<PageMode>` |
| isBrowse | 是否为浏览模式 | `ComputedRef<boolean>` |
| isEdit | 是否为编辑模式 | `ComputedRef<boolean>` |
| isAdd | 是否为新增模式 | `ComputedRef<boolean>` |
| setMode | 设置页面模式 | `(mode: PageMode, callback?: (mode: PageMode) => void) => void` |

## 类型定义

### PageMode

```ts
type PageMode = 'add' | 'edit' | 'browse'
```

### NavigationConfig

```ts
interface NavigationConfig {
  id?: number | string    // 菜单id
  name?: string           // 路由模块name，适用于内部跳转
  title?: string          // 菜单名称，适用于传外部url跳转
  url?: string            // 菜单url
  query?: Record<string, any>  // url参数
}
```

## 功能说明

### $goto 路由跳转

支持两种跳转方式：

**内部路由跳转**

```ts
$goto({
  name: 'userDetail',
  query: { id: '123', mode: 'browse' }
})
```

**外部URL跳转**

```ts
$goto({
  url: 'https://example.com',
  title: '外部链接'
})
```

### setMode 模式切换

用于详情页的模式切换，自动更新URL参数并触发回调。

```ts
// 切换到编辑模式
setMode('edit')

// 切换并执行回调
setMode('edit', (mode) => {
  console.log('已切换到编辑模式')
})
```

### $closeTag 关闭标签页

关闭当前标签页并自动切换到前一个标签页，需要在支持标签页管理的环境中使用。

## 注意事项

- 该 hook 依赖 `vue-router`，必须在路由环境中使用
- `$closeTag` 方法依赖父窗口的标签页管理功能
- `setMode` 会修改URL的query参数，刷新页面后模式会保持