Vue-router的动态路由：获取传递的值

假设我们有一个Vue应用程序，需要展示不同用户的个人资料页面。我们可以使用Vue-router的动态路由来达到这个目的，它允许我们根据不同的URL参数动态地加载不同的组件，并且可以获取传递的值。例如：

我们的路由配置如下：

const router = new VueRouter({
  routes: [
    {
      path: '/profile/:userId',
      name: 'UserProfile',
      component: UserProfile
    }
  ]
})

在这里，我们使用了动态路由参数 :userId，它表示我们可以通过URL参数来访问不同的用户个人资料页面。同时，我们也指定了路由名称 UserProfile 和所对应的 Vue 组件 UserProfile。

接下来，我们在 UserProfile 组件中获取路由参数 userId 的值，以便展示对应用户的资料信息：

<template>
  <div>
    <h1>User Profile</h1>
    <p>id: {{ userId }}</p>
    <p>name: {{ username }}</p>
    <p>email: {{ email }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  data () {
    return {
      userId: '',
      username: '',
      email: ''
    }
  },
  created () {
    this.userId = this.$route.params.userId
    // 此处可以根据userId获取对应用户的相关信息，这里只做模拟
    this.username = 'testuser' + this.userId
    this.email = 'testuser' + this.userId + '@example.com'
  }
}
</script>

在这里，我们使用了 created 生命周期钩子，在组件创建时从路由参数中获取 userId 的值，并将其赋值给组件的数据 userId。同时，我们还模拟了根据 userId 获取对应用户的相关信息，并将其展示在页面中。