vue 页面跳转的方法

在 Vue.js 中，页面跳转有多种方式，其中最常见的是使用 Vue Router。Vue Router 是官方提供的路由管理器，可以帮助你管理应用中的路由，实现页面之间的切换。

下面是使用 Vue Router 实现页面跳转的步骤：

1. 安装 Vue Router：

npm install vue-router

2. 在 main.js 中引入 Vue Router 并配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('./views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

这里定义了两个路由，一个是首页路由 '/'，一个是关于页面路由 '/about'。

3. 在组件中使用 router-link 标签实现页面跳转：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

这里使用 router-link 标签来实现页面的跳转。

4. 在组件中使用 router.push 方法实现编程式导航：

this.$router.push('/')

这里使用 this.$router.push 方法来实现编程式导航，可以根据需要跳转到指定的路由。

以上就是使用 Vue Router 实现页面跳转的基本步骤。当然，还可以使用其他的页面跳转方式，例如使用 window.location.href 进行页面跳转等。