vue3跳转新页面

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

// 首先确保你已经安装并配置了 Vue Router
// 安装 Vue Router: npm install vue-router@next

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

// 2. 在组件中使用 this.$router.push 进行页面跳转
export default {
  name: 'MyComponent',
  methods: {
    goToAboutPage() {
      // 跳转到关于页面
      this.$router.push({ path: '/about' })
    }
  }
}

// 解释说明：
// - `createRouter` 和 `createWebHistory` 是 Vue Router 提供的 API，用于创建路由实例。
// - `routes` 数组定义了应用中的路由映射，每个路由对象包含路径和对应的组件。
// - `this.$router.push` 方法用于导航到不同的 URL。这里我们通过传递一个对象来指定要跳转的目标路径。

如果你需要更详细的解释或其他相关的内容，请告诉我！