vue-router 要实现这样的功能 根据不同的用户角色，挂载对应组件到页面 根据用户id的不同，根据路由跳转对应的页面

是的，实现这样的功能需要在 vue-router 中进行路由守卫的设置。具体实现如下：

1. 在路由配置中设置路由元信息 meta，用于存储路由所需的权限信息和角色信息。

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      requiresAuth: true, // 是否需要登录
      roles: ['admin', 'user'] // 允许的角色
    }
  },
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    meta: {
      requiresAuth: true,
      roles: ['admin']
    }
  },
  {
    path: '/user',
    name: 'user',
    component: User,
    meta: {
      requiresAuth: true,
      roles: ['user']
    }
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/403',
    name: 'forbidden',
    component: Forbidden
  },
  {
    path: '*',
    redirect: '/'
  }
]

2. 设置全局前置路由守卫 beforeEach，用于对路由进行权限验证。在路由跳转前，判断用户是否登录和用户角色是否有权限访问当前路由。

router.beforeEach((to, from, next) => {
  const requiresAuth = to.meta.requiresAuth // 判断路由是否需要登录
  const currentUser = firebase.auth().currentUser // 获取当前用户
  const roles = to.meta.roles // 获取路由允许的角色

  if (requiresAuth && !currentUser) { // 未登录，跳转到登录页面
    next('/login')
  } else if (requiresAuth && currentUser) { // 已登录，验证角色权限
    if (roles.includes(getUserRole())) { // 用户角色有权限，通过
      next()
    } else { // 用户角色无权限，跳转到 403 页面
      next('/403')
    }
  } else { // 不需要登录，直接通过
    next()
  }
})

3. 在组件中根据用户 id 进行路由跳转。在组件中可以通过 $router.push() 方法进行路由跳转。

this.$router.push({ path: '/user/' + this.userId })

通过以上设置，就可以实现根据不同的用户角色，挂载对应组件到页面，以及根据用户 id 的不同，根据路由跳转对应的页面的功能。