Vue 重定向到路由

在 Vue 中，可以通过编程式导航来重定向到另一个路由。这在用户登录后将其重定向到应用程序的另一个页面，或将用户从未登录的页面重定向到登录页面时非常有用。

使用 $router 对象

在 Vue 中，可以通过访问 $router 对象来执行编程式导航。$router 对象是 Vue Router 的实例。

重定向到命名路由

要将用户重定向到命名路由，可以使用 $router.push 方法并指定路由名称。

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

此代码将用户重定向到名为 "login" 的路由。

重定向到路径

您还可以将用户重定向到路径。通过将路径传递给 $router.push 方法来实现。

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

此代码将用户重定向到 /login 路径。

重定向到命名路由并传递参数

您可以将参数传递给要重定向的命名路由，作为第二个参数传递给 $router.push 方法。

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

重定向到带查询参数的路径

您可以将查询参数添加到重定向路径中。将具有查询参数的路径作为第一个参数传递给 $router.push 方法。

this.$router.push({ path: '/user', query: { userId: '123' } })

目标路径将成为 /user?userId=123。

小结

在 Vue 中，使用 $router 对象进行编程式导航可将用户重定向到另一个路由。通过 $router.push 方法，可以将用户重定向到命名路由或路径。此外，还可以传递参数和查询参数。

以上是 Vue 重定向到路由的介绍，希望对你们有所帮助。