vue点击人员跳转到对应的页面

假设你有一个人员列表页面，每个人员都有一个唯一的 ID，你想实现点击某个人员后跳转到该人员的详情页面，可以按照以下步骤进行：

1. 在人员列表页面中，使用 `v-for` 指令循环渲染人员列表，每个人员都包含一个 `id` 属性。

2. 在每个人员的 DOM 元素上绑定一个点击事件，可以使用 `@click` 或 `v-on:click` 指令，例如：

   <div v-for="person in persons" :key="person.id" @click="goToDetail(person.id)">
     <!-- 渲染人员信息 -->
   </div>

上述代码中，`goToDetail` 是一个方法，它接收一个参数 `id`，表示要跳转到的人员的 ID。

3. 在组件的 methods 中定义 `goToDetail` 方法，使用 `this.$router.push` 方法实现页面跳转，例如：

   methods: {
     goToDetail(id) {
       this.$router.push(`/detail/${id}`);
     }
   }

上述代码中，`$router.push` 方法接收一个字符串参数，表示要跳转到的路由地址，其中`${id}`是动态路由参数，表示要跳转到的人员的 ID。这样，当用户点击某个人员时，就会自动跳转到对应的详情页面。

相关问题

vue实现点击人员跳转页面

要实现点击人员跳转页面，可以使用 vue-router 插件。首先需要在项目中安装 vue-router：

npm install vue-router --save

然后在项目中引入并使用 vue-router：

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

在上面的代码中，我们定义了一个路由表，其中包含了一个参数化路由 `/user/:id`，它表示了一个用户的详情页面，`:id` 表示了一个参数，用于指定用户的 ID。当用户点击某个人员时，我们可以将该人员的 ID 作为参数传递给路由，然后跳转到对应的用户详情页面：

<template>
  <div>
    <div v-for="user in users" :key="user.id" @click="goToUser(user.id)">
      {{ user.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ]
    }
  },
  methods: {
    goToUser(id) {
      this.$router.push({ path: `/user/${id}` })
    }
  }
}
</script>

在上面的代码中，我们定义了一个用户列表，当用户点击某个人员时，会调用 `goToUser` 方法，并使用 `this.$router.push` 方法跳转到对应的用户详情页面，其中 `path: `/user/${id}`` 表示了要跳转的路径，`$router.push` 方法会自动将该路径添加到浏览器的地址栏中，然后触发路由的跳转。在用户详情页面中，我们可以通过 `$route.params` 获取路由参数，从而显示对应的用户信息：

<template>
  <div>
    用户详情：{{ user.name }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.user = this.$route.params.id // 获取路由参数
  }
}
</script>

以上就是如何使用 vue-router 实现点击人员跳转页面的方法。

vue点击按钮跳转页面

你可以使用 Vue Router 来实现点击按钮跳转页面的功能。首先，需要在 `main.js` 中引入并使用 Vue Router：

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

Vue.use(VueRouter)

然后，在项目根目录下创建一个 `router` 目录，在该目录下创建一个 `index.js` 文件，用来定义路由信息：

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

在上面的代码中，我们定义了两个路由：`/` 对应 `Home` 组件，`/about` 对应 `About` 组件。

最后，在需要使用按钮跳转页面的组件中，可以使用 `router-link` 组件来实现：

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

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

当用户点击 `router-link` 组件时，会自动触发路由跳转。