vue3 路由跳转

// 引入 Vue Router
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 }
  ]
});

// 在组件中使用路由跳转
export default {
  name: 'App',
  methods: {
    // 使用 this.$router.push 进行编程式导航
    goHome() {
      this.$router.push({ path: '/' });
    },
    goAbout() {
      this.$router.push({ path: '/about' });
    }
  }
};

// 解释说明：
// 1. `createRouter` 和 `createWebHistory` 是 Vue Router 提供的函数，用于创建路由实例。
// 2. `routes` 数组定义了应用中的路由规则，每个路由对象包含路径 (`path`) 和对应的组件 (`component`)。
// 3. 在组件中，可以通过 `this.$router.push` 方法进行编程式导航，实现路由跳转。
// 4. `goHome` 和 `goAbout` 是两个示例方法，分别用于跳转到首页和关于页面。