vue 跳转页面

在 Vue 中，我们可以通过 Vue Router 来实现页面的跳转。Vue Router 是 Vue.js 的官方路由管理工具，可以帮助我们实现 SPA（单页应用）的开发。

在使用 Vue Router 时，我们需要先安装和配置它。具体的步骤如下：

1. 安装 Vue Router：

npm install vue-router

2. 在 main.js 中引入并使用 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 定义路由规则
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在上面的代码中，我们先通过 `import` 语句引入了 Vue Router，并在 `Vue` 对象上调用了 `Vue.use()` 方法来安装它。然后，我们定义了一个 `router` 对象，用于管理路由。在 `new Vue()` 中，我们把 `router` 对象传入，并通过 `$mount()` 方法将 Vue 实例挂载到 `#app` 元素上。

3. 在路由规则中定义要跳转的页面：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    // 其他路由规则
  ]
})

在上面的代码中，我们通过 `routes` 数组定义了多个路由规则，每个路由规则包括 `path` 和 `component` 两个属性。`path` 表示要跳转的页面的 URL，`component` 表示要显示的组件。例如，我们可以定义一个 `/home` 路由规则，用于跳转到一个名为 `Home` 的组件。

4. 在页面中使用 `<router-link>` 组件跳转页面：

<router-link to="/home">跳转到 Home 页面</router-link>

在上面的代码中，我们使用 `<router-link>` 组件来创建一个链接，点击该链接就会跳转到 `/home` 页面。你可以在其他页面中使用类似的方式来创建链接。

5. 在组件中使用 `$router.push()` 方法跳转页面：

this.$router.push('/home')

在上面的代码中，我们使用 `$router.push()` 方法来编程式地跳转到 `/home` 页面。你可以在组件中的任何地方使用类似的方式来实现页面跳转。

这样，我们就可以在 Vue 中使用 Vue Router 实现页面的跳转了。