vue3 页面跳转

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

// 1. 安装 Vue Router
// 如果你还没有安装 Vue Router，可以通过 npm 或 yarn 安装：
// npm install vue-router@next
// 或者
// yarn add vue-router@next

// 2. 创建路由实例
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
})

// 3. 在 main.js 中使用路由
import { createApp } from 'vue'
import App from './App.vue'

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

// 4. 在组件中进行页面跳转
// 方法一：使用 <router-link> 组件
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

// 方法二：使用编程式导航
<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/')
    },
    goAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

// 解释说明：
// - Vue Router 是 Vue.js 的官方路由管理器，它允许你在应用程序中实现页面跳转。
// - `createRouter` 和 `createWebHistory` 用于创建一个路由实例，并配置路由规则。
// - `<router-link>` 是一个内置组件，用于生成导航链接。
// - `this.$router.push()` 是一种编程式导航的方法，可以在 JavaScript 中触发页面跳转。