vue3跳转页面

// 使用 Vue Router 进行页面跳转

// 1. 首先确保你已经安装并配置了 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 router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

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

// 2. 在组件中使用编程式导航进行页面跳转
// 假设在某个组件中，我们想点击按钮后跳转到关于页面
<template>
  <div>
    <button @click="goToAbout">去关于页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      // 使用 this.$router.push 方法进行跳转
      this.$router.push('/about');
    }
  }
}
</script>

// 解释：
// - `this.$router.push('/about')` 是 Vue Router 提供的编程式导航方法，用于跳转到指定路径。
// - 你可以通过点击按钮或其他事件触发这个方法来实现页面跳转。