vue3 跳转

在 Vue 3 中，router.push 是 Vue Router 的一个方法，用于以编程方式导航到不同的路由。当你想要在用户执行某些操作（如点击按钮）后导航到不同的页面时，这个方法非常有用。

以下是如何在 Vue 3 中使用 router.push 的示例：

1. 定义路由

首先，确保你已经安装了 Vue Router 并定义了路由。在 src/router/index.js 文件中：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

2. 在组件中使用 router.push

在你的 Vue 组件中，你可以使用 useRouter 钩子来获取 router 实例，然后调用 push 方法：

<template>
  <button @click="navigateToAbout">Go to About</button>
</template>

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

const router = useRouter();

const navigateToAbout = () => {
  router.push('/about');
};
</script>

在这个例子中，我们创建了一个按钮，当用户点击这个按钮时，navigateToAbout 函数会被调用，使用 router.push 方法导航到 /about 路径。

3. 使用 push 传递参数

你还可以在使用 router.push 时传递路由参数：

router.push({ name: 'About', params: { userId: 123 } });

这将导航到 About 组件，并将 userId 参数传递给它。

4. 使用 push 传递查询字符串

如果你想要在 URL 中添加查询字符串，可以这样做：

router.push({ path: '/about', query: { userId: '123' } });

这将导航到 /about?userId=123。

注意事项

• 使用 router.push 会导致页面重新加载，而 router.replace 则不会。
• 如果你使用的是 Vue Router 4，确保在 Vue 3 项目中正确安装和配置。
• 在使用 router.push 时，确保路由名称或路径与路由配置中的名称或路径匹配。

通过使用 router.push，你可以在 Vue 3 应用中实现复杂的导航逻辑，提高用户体验。