vue3编程路由跳转

在Vue 3中，你可以使用`router`实例的`push`方法来进行编程式路由跳转。下面是一个简单的示例：

首先，确保你已经安装了`vue-router`:

npm install vue-router@next

然后，在你的Vue 3项目中，创建一个`router.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(),
  routes
});

export default router;

在上面的示例中，我们定义了两个路由：`Home`和`About`，并指定了对应的组件。

接下来，在你需要进行编程式路由跳转的地方，比如一个按钮的点击事件中，你可以使用`router.push()`方法来进行跳转。例如，在组件的方法中，你可以添加以下代码：

methods: {
  goToAbout() {
    this.$router.push('/about');
  }
}

在上面的代码中，通过调用`this.$router.push()`方法，传递目标路由的路径`'/about'`作为参数，就可以实现编程式路由跳转到`About`页面。

如果你想在路由跳转时传递参数，可以在`push()`方法的第二个参数中添加一个对象，例如：

this.$router.push({ path: '/about', query: { id: 1 }});

这样就可以传递一个名为`id`的查询参数到目标路由。

当然，还有其他一些高级的编程式路由跳转方法和选项，你可以查阅`vue-router`的官方文档以获取更多详细信息。