vue3,2 useRouter 跳转到其他页面

在 Vue3 中，使用 `useRouter` 可以获取当前路由实例，然后可以使用该实例的 `push` 方法进行路由跳转。

以下是一个例子：

<template>
  <div>
    <button @click="goToPage">Go to Page</button>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const goToPage = () => {
      router.push('/other-page')
    }

    return {
      goToPage
    }
  }
}
</script>

在上面的例子中，我们在 `setup` 函数中使用 `useRouter` 获取路由实例，并定义了一个 `goToPage` 方法，在该方法中调用 `router.push` 方法进行路由跳转。当用户点击按钮时，就会触发该方法进行跳转。

相关问题

vue useRouter 跳转到其他页面

在 Vue.js 中，可以使用 `this.$router.push()` 方法进行路由跳转。例如，要跳转到名为 `other-page` 的页面，可以使用以下代码：

this.$router.push('/other-page');

其中 `/other-page` 是你想要跳转的页面路径。

如果你想要传递参数，可以使用以下代码：

this.$router.push({ path: '/other-page', query: { key: value }});

其中 `key` 和 `value` 是你想要传递的参数。在目标页面中，你可以使用 `this.$route.query.key` 获取该参数的值。

另外，还可以使用 `this.$router.replace()` 方法进行路由跳转，它与 `push()` 方法类似，但不会在浏览器的历史记录中留下记录。

vue3 路由跳转找不到页面

在Vue3中，当路由跳转找不到页面时，有以下几种处理方法。

首先，你可以使用`router-link`标签来进行路由跳转。在模板中使用`router-link`标签，并设置相应的`to`属性来定义跳转的路径。当跳转的路径找不到对应的页面时，Vue Router会自动处理并显示一个默认的错误页面。

另外，你也可以使用`useRouter`函数来进行路由跳转。在Vue3中，由于`setup`组件是在初始化之前执行，所以无法直接使用`this.router.push`来进行跳转。取而代之的是，你需要从`vue-router`中引入`useRouter`函数，并在`setup`函数内部使用它来进行路由跳转。这样可以确保在初始化之后进行跳转操作。

总结起来，Vue3中处理路由跳转找不到页面的方法有两种，一种是使用`router-link`标签进行跳转，另一种是在`setup`函数内部使用`useRouter`函数进行跳转。这样就可以有效地解决路由跳转找不到页面的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3路由跳转方法](https://blog.csdn.net/jdhrucn/article/details/126945946)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]