Vue的路由跳转

文章目录

• • • 基本语法
    • [1. **使用路径字符串跳转**](#1. 使用路径字符串跳转)
    • [2. **使用命名路由跳转**](#2. 使用命名路由跳转)
    • [3. **传递参数**](#3. 传递参数)
    • • **带路径参数**
      • **带查询参数**
      • [**结合 `params` 和 `query`**](#结合 params 和 query)
    • [4. **替换导航 (replace)**](#4. 替换导航 (replace))
    • [5. **导航失败的处理**](#5. 导航失败的处理)
    • [6. **返回上一页或前进**](#6. 返回上一页或前进)
    • 总结

this.$router.push() 是 Vue Router 提供的导航方法，用于在 Vue 应用中编程式地进行路由跳转。可以通过代码控制路由导航，而不仅限于依赖 <router-link> 或者浏览器地址栏。

在你的例子中，this.$router.push({name: 'login'}) 是一种 命名路由 的导航方式，表示跳转到名为 login 的路由。

基本语法

this.$router.push(location)

location 是一个字符串或对象，表示要导航到的目标。可以通过不同的方式传递目标路径。

1. 使用路径字符串跳转

this.$router.push('/login')

这种方式是通过指定一个字符串路径 /login 来跳转，等同于点击 <router-link to="/login">。

2. 使用命名路由跳转

this.$router.push({ name: 'login' })

通过路由的 名字 来跳转，而不是路径。路由名称需要在定义路由时指定，例如：

const routes = [
  { path: '/login', name: 'login', component: LoginComponent }
]

这种方式的好处是即使以后路径改变了，路由名可以保持不变，方便维护。

3. 传递参数

带路径参数

在一些场景下，你可能需要在跳转时传递参数（如用户 ID 等）。在 Vue Router 中，路径参数可以通过对象的 params 字段传递。

• 定义带参数的路由：

const routes = [
  { path: '/user/:id', name: 'user', component: UserComponent }
]

• 使用 params 传递参数：

this.$router.push({ name: 'user', params: { id: 123 } })

这里的 params 会将 id 的值传递给路由 /user/:id，最终路径会变成 /user/123。

注意：如果使用命名路由时要传递 params，不能 直接用路径字符串，例如 /user/123，而是应该用对象的形式传递。

带查询参数

查询参数是 URL 中的 query string，例如 /login?redirect=home。可以通过对象的 query 字段传递查询参数：

this.$router.push({ path: '/login', query: { redirect: 'home' } })

结果 URL 会变成 /login?redirect=home。这些查询参数通常用在处理重定向或者过滤数据时。

结合 params 和 query

你可以同时传递路径参数和查询参数：

this.$router.push({
  name: 'user',
  params: { id: 123 },
  query: { plan: 'premium' }
})

结果 URL 会是 /user/123?plan=premium，其中 params 的 id 是路径参数，query 的 plan 是查询参数。

4. 替换导航 (replace)

push 方法是将新的历史记录推入栈中，如果不希望在历史记录中保留这个页面（即用户点击返回按钮时不会返回到当前页面），可以使用 replace 方法：

this.$router.replace({ name: 'login' })

这与 push 的区别在于 replace 不会在浏览器历史记录中保留当前页面。

5. 导航失败的处理

$router.push() 返回的是一个 Promise，可以通过 .then() 和 .catch() 来捕获导航成功和失败的情况。如果导航失败（如目标相同的路由），可以通过 .catch() 来处理。

this.$router.push({ name: 'login' }).catch(err => {
  console.log(err);
});

如果导航到相同的路由，Vue Router 会抛出一个错误。通常可以通过捕获并忽略这个错误来避免控制台的警告：

this.$router.push({ name: 'login' }).catch(err => {});

6. 返回上一页或前进

除了 push 和 replace 之外，Vue Router 还提供了 go 方法用于控制前进或后退。

• 返回上一页：

this.$router.go(-1)

• 前进一页：

this.$router.go(1)

总结

• this.$router.push() 是 Vue Router 的编程式导航方法，用于代码中控制路由跳转。
• 可以通过路径字符串、命名路由、路径参数、查询参数等多种方式跳转。
• params 和 query 分别用于传递路径参数和查询参数。
• replace 方法用于不保留历史记录的跳转。
• 可以使用 go 方法前进或后退。

这个 API 灵活且功能强大，常用于表单提交后的跳转、认证处理、条件导航等。