vue-router 实现这样的功能挂载组件到页面；根据不同的用户角色，如：管理员，普通用户等来做路由权限管理；根据路由跳转对应的页面

要实现这样的功能，首先需要在 Vue 项目中引入 vue-router，然后可以通过创建不同的路由来管理组件的挂载和路由权限。

在创建路由时，可以为每个路由设置对应的组件和路由权限，例如：

import Vue from 'vue'
import VueRouter from 'vue-router'
import AdminComponent from './components/AdminComponent.vue'
import UserComponent from './components/UserComponent.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    meta: {
      requiresAdmin: true
    }
  },
  {
    path: '/user',
    component: UserComponent,
    meta: {
      requiresUser: true
    }
  }
]

const router = new VueRouter({
  routes
})

在上面的代码中，我们创建了两个路由，分别对应管理员和普通用户的页面。在每个路由的 meta 属性中设置了对应的路由权限，这将在路由跳转时用到。

接下来，我们可以在项目中使用 router.beforeEach 方法来进行路由权限管理，例如：

router.beforeEach((to, from, next) => {
  const isAdmin = localStorage.getItem('isAdmin')
  if (to.matched.some(record => record.meta.requiresAdmin)) {
    if (isAdmin === 'true') {
      next()
    } else {
      next('/login')
    }
  } else if (to.matched.some(record => record.meta.requiresUser)) {
    if (isAdmin === 'false') {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

在上面的代码中，我们通过判断当前用户的身份来进行路由权限的判断，如果用户没有对应的权限，则跳转到登录页面。

最后，在组件中使用 router-link 标签来跳转到对应的路由，例如：

<router-link to="/admin">Admin Page</router-link>
<router-link to="/user">User Page</router-link>

这样就可以根据不同的用户角色来做路由权限管理，同时根据路由跳转对应的页面。