vite_vue2.7_antdv1/docs/2.全家桶/1. 路由.md

# VueRouter 路由

Vue2.x 中只能使用 vue-router3 版本。

## 目录说明

有关路由的功能都在以下的目录中。

```sh
.
├── src # 主目录
│   ├── main.js # 主入口
│   ├── router # 路由配置
│   │   ├── guard # 路由守卫
│   │   ├── modules # 路由模块
│   │   └── index.js
│   └── views # 页面
```

## route modules

关于路由表，建议根据功能的不同来拆分到 modules 文件夹中。

这样做的好处是：

1. 方便后期维护
2. 减少 Git 合并代码时的冲突的可能

## componsition-api 中使用

在 hooks/useRouter 中封装了两个方法：

1. `useRouter`
2. `useRoute`

```javascript
import { watch } from 'vue'
import { useRoute, useRouter } from '@/hooks/useRouter'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    watch(route, () => {
      console.log('route 变化', route.value)
    })

    function routeChange() {
      router.push({ path: '/home', query: { key: Date.now() } })
    }

    return {
      routeChange
    }
  }
}
```