在vue中点击一张图片就可以跳转到别一下页面

要在Vue中实现点击图片跳转到另一个页面，可以使用Vue Router来进行路由管理。具体步骤如下：

1. 安装Vue Router

在终端中使用npm安装Vue Router：

npm install vue-router --save

2. 创建路由文件

在src目录下创建一个名为router.js的文件并添加以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from './components/Page1.vue'
import Page2 from './components/Page2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/page1',
      name: 'Page1',
      component: Page1
    },
    {
      path: '/page2',
      name: 'Page2',
      component: Page2
    }
  ]
})

这里我们定义了两个路由：/page1和/page2，分别对应两个组件Page1和Page2。

3. 创建组件

在src/components目录下创建两个组件Page1.vue和Page2.vue，并在其中添加一张图片：

<template>
  <div>
    <img src="./image.jpg" @click="goToPage2">
  </div>
</template>

<script>
export default {
  methods: {
    goToPage2() {
      this.$router.push('/page2')
    }
  }
}
</script>

这里我们使用了$router.push方法来跳转到/page2路由。

4. 配置路由

在src/main.js中导入并使用router.js：

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

Vue.config.productionTip = false

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

这样就完成了点击图片跳转到另一个页面的功能。当你点击图片时，就会跳转到/page2路由，显示Page2组件的内容。