路由管理 #

## 编程式导航

除了使用[RouterLink](./components.md#router-link)，还可以使用编程式导航：

```vue
<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 字符串路径
function goToHome() {
  router.push('/home')
}

// 对象形式
function goToUser(id) {
  router.push({ path: `/user/${id}` })
}

// 命名路由
function goToUserProfile(id) {
  router.push({
    name: 'UserProfile',
    params: { id: id }
  })
}

// 带查询参数
function goToSearch(query) {
  router.push({
    path: '/search',
    query: { q: query }
  })
}

// 替换当前历史记录
function replaceTo(path) {
  router.replace(path)
}

// 在历史记录中前进或后退
function goBack() {
  router.go(-1)
}

function goForward() {
  router.go(1)
}

function goSteps(steps) {
  router.go(steps)
}
</script>

<template>
  <div>
    <button @click="goToHome">Go to Home</button>
    <button @click="goToUser(123)">Go to User 123</button>
    <button @click="goToUserProfile(123)">Go to User Profile</button>
    <button @click="goBack">Go Back</button>
  </div>
</template>
</template>
```

## 路由守卫

路由守卫允许我们在导航过程中执行一些逻辑：

### 全局前置守卫

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

const router = createRouter({ ... })

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  if (to.meta.requiresAuth && !isUserLoggedIn()) {
    // 重定向到登录页
    next('/login')
  } else if (to.meta.requiresAuth && isUserLoggedIn()) {
    // 已登录用户访问登录页则重定向到首页
    if (to.path === '/login' && isUserLoggedIn()) {
      next('/')
    } else {
      next()
    }
  } else {
    next()
  }
})
```

### 组件内守卫

```vue
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

// 导航离开该组件的对应路由时调用
onBeforeRouteLeave((to, from, next) => {
  const answer = window.confirm('Do you really want to leave? You have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
})

// 在当前路由改变，但是该组件被复用时调用
onBeforeRouteUpdate(async (to, from, next) => {
  // 对路由变化做出响应...
  if (from.params.id !== to.params.id) {
    try {
      // 获取新的用户数据
      await fetchData(to.params.id)
      next()
    } catch (error) {
      next(false)
    }
  } else {
    next()
  }
})
</script>
```

## 路由元信息

可以为路由添加元信息，用于路由守卫或组件逻辑：

```javascript
const routes = [
  {
    path: '/home',
    component: Home,
    meta: { 
      requiresAuth: false,
      title: 'Home Page'
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: { 
      requiresAuth: true,
      title: 'User Profile',
      roles: ['user', 'admin']
    }
  },
  {
    path: '/admin',
    component: Admin,
    meta: { 
      requiresAuth: true,
      requiresAdmin: true,
      title: 'Admin Panel'
    }
  }
]
```

```vue
<!-- 在组件中访问元信息 -->

路由管理是构建单页应用的核心，通过合理使用Vue Router的各种功能，可以创建出用户体验良好的导航系统。