假设我们有一个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.userIdthis.email = 'testuser' + this.userId + '@example.com'}
}
</script>
在这里，我们使用了 created 生命周期钩子，在组件创建时从路由参数中获取 userId 的值，并将其赋值给组件的数据 userId。同时，我们还模拟了根据 userId 获取对应用户的相关信息，并将其展示在页面中。
)
