面试题：Vue中如何通过动态参数传递实现路由跳转并获取参数

Question

在Vue项目中，假设我们有一个用户详情页，需要根据不同用户ID展示对应信息。请说明如何在路由配置中设置动态参数，如何在组件内通过点击按钮跳转到该详情页并传递用户ID参数，以及在详情页组件中如何获取这个动态参数。

Answer 1

1. 路由配置中设置动态参数

在 router/index.js 文件中，配置路由时使用冒号（:）来定义动态参数。例如：

import Vue from 'vue';
import Router from 'vue-router';
import UserDetail from '@/components/UserDetail';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'UserDetail',
      component: UserDetail
    }
  ]
});

这里 :id 就是动态参数，表示用户ID。

2. 组件内通过点击按钮跳转到该详情页并传递用户ID参数

假设在一个列表组件中，每个列表项都有一个按钮，点击按钮跳转到对应的用户详情页。可以在按钮的 @click 事件中使用 $router.push 方法，并传递包含用户ID的路由对象。

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
        <button @click="goToUserDetail(user.id)">查看详情</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ]
    };
  },
  methods: {
    goToUserDetail(id) {
      this.$router.push({
        name: 'UserDetail',
        params: { id: id }
      });
    }
  }
};
</script>

3. 详情页组件中获取这个动态参数

在详情页组件（UserDetail.vue）中，可以通过 $route.params 来获取动态参数。

<template>
  <div>
    <h1>用户详情</h1>
    <p>用户ID: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

也可以在 created 钩子函数中获取并用于初始化数据：

export default {
  data() {
    return {};
  },
  created() {
    const userId = this.$route.params.id;
    // 根据 userId 进行数据请求等操作
  }
};