vue.js实现一个页面多个路由

Vue.js 可以使用动态路由和命名路由来实现一个页面多个路由的效果。

动态路由是指在路由路径中加入参数，例如：

{
  path: '/user/:userId',
  component: User
}

这个路由可以匹配类似 `/user/123` 这样的路径，其中的 `123` 就是动态参数 `:userId`。

命名路由是指给每个路由一个名称，例如：

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

这个路由可以使用 `$router.push({ name: 'user', params: { userId: 123 } })` 来跳转，其中的 `123` 就是动态参数 `:userId`。

在实现一个页面多个路由的时候，可以将多个动态路由或者命名路由都指向同一个组件，例如：

{
  path: '/user/:userId',
  name: 'user',
  component: User
},
{
  path: '/group/:groupId',
  name: 'group',
  component: User
}

这样 `/user/123` 和 `/group/456` 都会渲染 `User` 组件。在 `User` 组件中可以通过 `$route.params.userId` 或者 `$route.params.groupId` 来获取动态参数。