vue3 同组件跳转 路由

在Vue3中，要实现同组件跳转路由，你可以使用Vue Router提供的编程式导航的方法来实现。首先，你需要在vue文件中引入Vue Router，并使用`router.push()`方法进行跳转。

假设你的组件名为`ExampleComponent`，你可以在同组件内部通过以下方式进行跳转路由:

// 在 ExampleComponent.vue 文件中
<script>
import { useRouter } from 'vue-router';

export default {
  name: 'ExampleComponent',
  setup() {
    const router = useRouter();

    // 点击按钮跳转到 /home 路由
    const goToHome = () => {
      router.push('/home');
    };

    return {
      goToHome,
    };
  },
};
</script>

<template>
  <button @click="goToHome">跳转到首页</button>
</template>

在上述代码中，我们首先导入了`useRouter`方法，然后在`setup`函数中创建了一个`router`实例。接着，我们定义了一个`goToHome`方法，当按钮被点击时，通过调用`router.push('/home')`方法，将路由跳转到`/home`。

请注意，上述代码中的`/home`只是一个示例，你可以根据你的实际路由配置进行相应的修改。

这样，当你在同组件内部点击按钮时，就能实现路由的跳转了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue相同路由跳转强制刷新该路由组件操作](https://download.csdn.net/download/weixin_38748382/12924338)[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_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3路由配置与路由跳转](https://blog.csdn.net/nolanElio/article/details/124496342)[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_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]