vue3组件如何使用路由钩子

在 Vue 3 的组合式 API 中，处理路由跳转通常使用 Vue Router 提供的 useRouter 钩子。以下是 Vue 3 组合式 API 中常见的路由跳转方法和实践：

---

1. 跳转到其他页面的基本步骤

（1）引入 useRouter

在组件中引入 Vue Router 的 useRouter 钩子，这个钩子可以获取路由实例，从而调用其方法（如 push 或 replace）来实现页面跳转。

import { useRouter } from 'vue-router';

（2）获取路由实例

通过调用 useRouter() 获取路由实例。

const router = useRouter();

（3）调用路由跳转方法

通过 router.push 或 router.replace 来实现跳转。

• router.push：用于跳转到新页面，当前页面会被保留在历史记录中。
• router.replace：用于跳转到新页面，但不会在历史记录中保留当前页面。

---

2. 示例：跳转到其他页面

（1）跳转到指定路径

const router = useRouter();

function goToPage() {
  router.push('/target-page'); // 跳转到 /target-page
}

（2）传递参数

可以通过 query 或 params 传递参数。

• 通过 query 传递参数（URL 中会附加查询字符串）：

  function goToPageWithQuery() {
    router.push({
      path: '/target-page',
      query: { id: 123, name: 'example' }, // 例如 /target-page?id=123&name=example
    });
  }
  

• 通过 params 传递参数（需要在路由配置中定义动态路由）：

  function goToPageWithParams() {
    router.push({
      name: 'TargetPage', // 路由的 name
      params: { id: 123 }, // 动态参数，例如 /target-page/123
    });
  }
  

  注意：当使用 params 跳转时，路由路径必须包含动态参数（如 /target-page/:id），否则会报错。

---

3. 完整示例：在组件中使用路由跳转

路由配置

假设我们有如下路由配置：

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '@/components/HomePage.vue';
import TargetPage from '@/components/TargetPage.vue';

const routes = [
  { path: '/', component: HomePage },
  { path: '/target-page', name: 'TargetPage', component: TargetPage },
  { path: '/target-page/:id', name: 'TargetPageWithId', component: TargetPage }, // 动态路由
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在组件中跳转

在组件中，通过按钮点击实现跳转：

<template>
  <div>
    <button @click="goToPage">跳转到目标页面</button>
    <button @click="goToPageWithQuery">带查询参数跳转</button>
    <button @click="goToPageWithParams">带动态参数跳转</button>
  </div>
</template>

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

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

    // 普通跳转
    function goToPage() {
      router.push('/target-page');
    }

    // 带查询参数跳转
    function goToPageWithQuery() {
      router.push({
        path: '/target-page',
        query: { id: 123, name: 'example' }, // URL: /target-page?id=123&name=example
      });
    }

    // 带动态参数跳转
    function goToPageWithParams() {
      router.push({
        name: 'TargetPageWithId',
        params: { id: 123 }, // URL: /target-page/123
      });
    }

    return {
      goToPage,
      goToPageWithQuery,
      goToPageWithParams,
    };
  },
};
</script>

---

4. 跳转的几种方式总结

（1）router.push

• 用途：跳转到新页面，保留当前页面的历史记录。
• 语法：

  router.push('/path'); // 简单跳转
  router.push({ path: '/path', query: { key: 'value' } }); // 带查询参数
  router.push({ name: 'route-name', params: { key: 'value' } }); // 带动态参数
  

（2）router.replace

• 用途：跳转到新页面，不保留当前页面的历史记录。
• 语法：

  router.replace('/path'); // 简单跳转
  router.replace({ path: '/path', query: { key: 'value' } }); // 带查询参数
  router.replace({ name: 'route-name', params: { key: 'value' } }); // 带动态参数
  

（3）router.back

• 用途：返回到上一页。
• 语法：

  router.back();
  

（4）router.forward

• 用途：前进到下一页（如果有历史记录）。
• 语法：

  router.forward();
  

（5）router.go

• 用途：在历史记录中跳转到指定位置。
• 语法：

  router.go(-1); // 后退一页
  router.go(1);  // 前进一页
  

---

5. 注意事项

1. 动态参数的使用：

   • 如果使用 params 传递参数，确保路由路径中定义了对应的动态参数（如 /path/:id）。
   • 如果路由中没有动态参数，使用 params 会报错。

2. query 和 params 的区别：

   • query 会附加到 URL 的查询字符串中（如 ?key=value）。
   • params 是动态路由的一部分，直接嵌入 URL 中（如 /path/:id）。

3. 跳转失败的处理：

   • 如果目标页面与当前页面相同，Vue Router 会抛出 NavigationDuplicated 错误。这种情况下，可以通过捕获错误或添加条件判断来避免：

     router.push('/path').catch(err => {
       if (err.name !== 'NavigationDuplicated') {
         throw err;
       }
     });
     

---

通过以上方式，你可以在 Vue 3 的组合式 API 中灵活地实现路由跳转。如果有其他需求或问题，欢迎继续讨论！