面试题：Vue中如何通过Vue Router获取路由参数和查询字符串

Question

在Vue项目中，使用Vue Router配置了一条路由路径为 `/user/:id`，同时可能会携带查询字符串如 `/user/123?name=John`。请描述如何在组件中获取 `id` 参数以及 `name` 查询字符串的值，并给出相应代码示例。

Answer 1

在Vue组件中获取id参数以及name查询字符串的值，可以通过以下方式：

1. 获取id参数：在使用Vue Router的组件中，可以通过$route.params来获取路由参数。
2. 获取name查询字符串的值：通过$route.query来获取查询字符串的值。

以下是代码示例：

<template>
  <div>
    <p>ID: {{ $route.params.id }}</p>
    <p>Name: {{ $route.query.name }}</p>
  </div>
</template>

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

在上述代码中，$route.params.id获取了路由路径中的id参数值，$route.query.name获取了查询字符串中name的值。