vue3router跳转

在 Vue 3 中，你可以使用 Vue Router 进行页面跳转。

首先，确保你已经安装了 Vue Router。如果还没有安装，可以通过以下命令进行安装：

npm install vue-router@next

接下来，在你的 Vue 3 项目中，创建一个名为 `router.js`（或者其他你喜欢的名字）的文件，并在其中配置你的路由。

import { createRouter, createWebHistory } from 'vue-router';

// 导入你的页面组件
import Home from './components/Home.vue';
import About from './components/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` 对应 About 组件。

接下来，在你的主入口文件（通常是 `main.js`）中，将创建的路由实例挂载到 Vue 实例上。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

现在，你可以在组件中使用 `<router-link>` 组件和 `router.push()` 方法进行页面跳转。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

在上面的示例中，`<router-link>` 组件用于生成链接，`<router-view>` 组件用于渲染匹配到的组件。

如果你想通过编程方式进行页面跳转，可以使用 `router.push()` 方法。

// 在某个事件处理函数中调用 router.push() 进行跳转
methods: {
  goToAboutPage() {
    this.$router.push('/about');
  }
}

这就是在 Vue 3 中使用 Vue Router 进行页面跳转的基本步骤。希望对你有帮助！