vue3 跳转

// 使用 Vue Router 进行页面跳转的示例代码

// 首先确保你已经安装并配置了 Vue Router
// 在 main.js 中配置路由
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

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

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

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

// 在组件中使用 this.$router.push() 方法进行跳转
<template>
  <div>
    <button @click="goToAbout">Go to About Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      // 使用编程式导航跳转到关于页面
      this.$router.push({ path: '/about' });
    }
  }
};
</script>

// 或者在模板中直接使用 <router-link> 组件
<template>
  <div>
    <!-- 使用 <router-link> 组件进行声明式导航 -->
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

解释说明：

1. Vue Router 安装与配置：首先需要安装并配置 Vue Router，通过 createRouter 和 createWebHistory 创建一个路由器实例，并将其挂载到 Vue 应用上。
2. 编程式导航：在组件的方法中使用 this.$router.push() 方法可以实现编程式的页面跳转。例如，点击按钮后跳转到指定路径。
3. 声明式导航：使用 <router-link> 组件可以在模板中以声明式的方式创建导航链接，类似于 HTML 的 <a> 标签。

如果你不需要代码部分，请告知我。