vue3 跳转路由

// 使用 Vue Router 在 Vue 3 中跳转路由的示例代码

// 首先，确保你已经安装并配置了 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 }
  ]
});

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

// 然后，在组件中使用 $router 进行路由跳转
// 例如，在一个按钮点击事件中跳转到关于页面：

<template>
  <div>
    <button @click="goToAbout">Go to About Page</button>
  </div>
</template>

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

// 解释说明：
// - `this.$router.push('/about')`：这是 Vue Router 提供的一个方法，用于导航到指定的路由路径。
// - `@click="goToAbout"`：这是一个事件绑定，当用户点击按钮时会触发 `goToAbout` 方法。