15.2 编程式导航-Vue.js从入门到精通(三)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(三)

### 15.2 编程式导航

在Vue.js应用中，导航通常指的是用户如何在不同视图（或页面）之间移动。Vue Router是Vue.js的官方路由管理器，它允许我们构建单页面应用（SPA），通过改变URL而不重新加载页面来导航到不同的视图。Vue Router提供了两种导航方式：声明式导航和编程式导航。本章节将深入探讨编程式导航，了解如何在Vue.js应用中通过编程手段控制路由跳转，以及处理导航过程中的一些高级特性。

#### 15.2.1 编程式导航基础

编程式导航是指通过JavaScript代码来直接控制路由的跳转，而不是通过`<router-link>`组件。这在某些场景下非常有用，比如基于用户权限的路由控制、在按钮点击事件中触发路由跳转、或者在组件内部根据某些逻辑条件动态改变路由等。

Vue Router提供了几个实例方法来实现编程式导航，其中最常用的是`router.push()`和`router.replace()`。

- **router.push(location, onComplete?, onAbort?)**: 向history栈添加一个新的记录，因此，当用户点击浏览器倒退按钮时，可以回到之前的URL。`location`可以是一个字符串路径，或者一个描述地址的对象。`onComplete`和`onAbort`是可选的回调函数，分别在导航成功完成（在所有的异步钩子被解析之后）或终止（导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由）时调用。

- **router.replace(location, onComplete?, onAbort?)**: 它不会向history添加新记录，而是替换掉当前的history记录，就像使用`<router-link replace>`或设置了`replace: true`的`router.push()`一样。

#### 15.2.2 使用router.push()

假设我们有一个Vue Router实例，并且已经定义好了几个路由。现在，我们想要在组件内部通过点击按钮来跳转到另一个路由：

```vue
<template>
  <div>
    <button @click="goToHome">Go Home</button>
  </div>
</template>

在这个例子中，我们定义了一个`goToHome`方法，当用户点击按钮时，会调用`this.$router.push('/home')`来导航到`/home`路由。`this.$router`是Vue组件中访问路由实例的常用方式。

#### 15.2.3 使用router.replace()

与`router.push()`类似，`router.replace()`也是用来导航的，但它不会向history添加新条目。这在某些情况下很有用，比如当你想要避免用户通过点击浏览器后退按钮回到某个状态时：

```vue
<template>
  <div>
    <button @click="replaceToProfile">Go to Profile (Replace)</button>
  </div>
</template>

#### 15.2.4 导航到命名的路由

如果你使用命名路由，也可以通过名称来导航，而不是路径字符串。首先，在路由配置中给路由命名：

```javascript
const routes = [
  { path: '/home', name: 'Home', component: Home },
  { path: '/profile', name: 'Profile', component: Profile }
];
```

然后，在编程式导航中使用`name`属性来指定要导航到的路由：

```vue
<script>
export default {
  methods: {
    goToNamedRoute() {
      this.$router.push({ name: 'Profile' });
    }
  }
}
</script>
```

#### 15.2.5 传递参数

在编程式导航中，你还可以传递参数（如查询参数或动态路由参数）。对于查询参数，可以直接在`location`对象中添加`query`属性；对于动态路由参数，则需要确保在`path`中正确指定参数，或在`name`对应的路由配置中定义了参数，并在`params`（对于嵌套路由）或`query`（对于普通路由）中传递它们。

**查询参数示例**：

```vue
<script>
export default {
  methods: {
    goToSearch() {
      this.$router.push({ path: '/search', query: { keyword: 'Vue.js' } });
    }
  }
}
</script>
```

**动态路由参数（假设有一个名为`User`的路由，它接受一个`:id`参数）**：

```vue
<script>
export default {
  methods: {
    goToUser(userId) {
      this.$router.push({ name: 'User', params: { id: userId } }); // 注意：对于非嵌套路由，通常使用query而不是params
      // 如果是嵌套路由，并且你想在子路由中传递参数，可能需要使用不同的方法或确保子路由配置正确
    }
  }
}
</script>
```

注意：在大多数情况下，对于非嵌套路由，我们会使用`query`而不是`params`来传递参数，因为`params`主要用于动态片段和星号片段的路由匹配。

#### 15.2.6 导航守卫与编程式导航

Vue Router还提供了导航守卫功能，允许你在路由跳转前、跳转后、进入组件前后等时机执行特定的逻辑。编程式导航也可以与导航守卫结合使用，以实现更复杂的路由控制逻辑。

例如，你可以在全局前置守卫中检查用户是否登录，如果用户未登录，则阻止导航到需要认证的路由，并可能重定向到登录页面：

```javascript
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 这里检查用户是否登录，假设有一个isAuthenticated函数来检查
    if (!isAuthenticated()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将尝试访问的URL作为参数传递给登录页面
      });
    } else {
      next(); // 确保一定要调用next()
    }
  } else {
    next(); // 确保一定要调用next()
  }
});
```

在这个例子中，`meta`字段被用来在路由记录上添加自定义信息（如`requiresAuth`），以便在导航守卫中引用。

#### 15.2.7 总结

编程式导航是Vue Router中一项强大的功能，它允许你通过JavaScript代码直接控制路由的跳转，实现复杂的导航逻辑。通过`router.push()`和`router.replace()`等方法，你可以灵活地根据应用需求来导航到不同的路由，并传递参数。此外，结合导航守卫，你可以进一步控制路由跳转的条件，确保应用的安全性和用户体验。掌握编程式导航，对于构建功能丰富、交互流畅的单页面应用至关重要。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(五)

Vue源码完全解析

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(四)

TypeScript和Vue从入门到精通(二)

Vue3技术解密

vue项目构建基础入门与实战

移动端开发指南

TypeScript和Vue从入门到精通(一)

Vue.js从入门到精通(一)

Vue.js从入门到精通(四)

Vue原理与源码解析