vue怎么实现页面跳转

在 Vue 中实现页面跳转通常使用 Vue Router，它是 Vue 官方提供的一款路由管理插件，用于实现单页应用的页面跳转和管理。

首先，在 Vue 项目中安装 Vue Router：

npm install vue-router --save

然后在 main.js 中引入和配置 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

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

export default router

其中，`routes` 中定义了各个页面的路由信息，包括路由路径、路由名称和对应的组件。`router` 对象则是路由管理器的实例，通过 `Vue.use(VueRouter)` 声明使用 Vue Router 插件。

接下来，在组件中通过 `router-link` 标签实现页面跳转：

<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

`router-link` 是 Vue Router 提供的标签，它会自动渲染成一个跳转链接。其中 `to` 属性是要跳转的路由路径。

最后，在组件中使用 `router-view` 标签渲染路由对应的组件：

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

`router-view` 是 Vue Router 提供的标签，它会自动渲染对应的组件。需要注意的是，`router-view` 必须在路由管理器的根组件中使用。

这样就可以在 Vue 中实现页面跳转了。