# Vue Router 路由

## 学习目标
- 掌握路由配置
- 学会路由导航
- 理解路由守卫

## 路由配置

```typescript
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: () => import('./Home.vue') },
        { path: '/about', component: () => import('./About.vue') },
        { path: '/user/:id', component: () => import('./User.vue') }
    ]
})
```

## 编程式导航

```typescript
import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/about')
router.push({ name: 'user', params: { id: '123' } })
```

## 路由守卫

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

## 动手练习

1. 配置嵌套路由
2. 实现面包屑导航
4. 添加登录守卫