vue点击跳转到指定页

在 Vue 中，可以通过 router 进行页面的跳转。具体步骤如下：

1. 安装 Vue Router：

npm install vue-router

2. 在 main.js 中引入 Vue Router：

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

Vue.use(VueRouter)

3. 创建路由实例并配置路由：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

其中，`routes` 是一个数组，每个元素表示一个路由规则，包括路径 `path`、名称 `name` 和组件 `component`。

4. 在组件中使用 `router-link` 组件进行跳转：

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

`to` 属性指定跳转的路径。

5. 在组件中使用 `$router.push()` 方法进行编程式跳转：

this.$router.push('/')

其中，参数为要跳转的路径。

完整代码示例：

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

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

// App.vue
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

// Home.vue
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

// About.vue
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>