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 routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

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

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

// 2. 在组件中使用 <router-link> 或编程式导航进行页面跳转。

// 使用 <router-link> 组件（推荐）
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

// 编程式导航（在方法中使用 this.$router.push()）
<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push({ path: '/about' });
    }
  }
}
</script>

// 以上代码展示了如何在 Vue 3 中配置和使用 Vue Router 进行页面跳转。