vue3 动态路由案例

在Vue3中，动态路由的实现方式与Vue2相似。以下是一个简单的Vue3动态路由的案例：

1. 首先，在你的Vue项目中创建一个路由配置文件（例如router.js）。

2. 在路由配置文件中，引入Vue和Vue Router，并创建一个空的路由实例。

import Home from './views/Home.vue'

const routes = [
 {
 path: '/',
 name: 'Home',
 component: Home }
]

const router = createRouter({
 history: createWebHistory(),
 routes})

export default router```

3. 创建一个方法来根据用户角色生成动态路由，并将生成的路由添加到路由实例中。

// 根据角色生成对应的路由配置 const dynamicRoutes = roles.map(role => ({
path: `/${role}`,
name: role,
component: () => import(`@/views/${role}.vue`),
meta: { role: role } // 可以在meta中添加一些自定义信息 }))

// 将生成的动态路由添加到路由实例中 dynamicRoutes.forEach(route => {
router.addRoute(route)
})
}

4. 在登录成功后，获取用户角色，并调用生成动态路由的方法。

const roles = ['admin', 'user']

generateRoutes(roles)

5. 最后，在Vue实例中使用该路由实例。

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

这样，根据用户的角色，在登录成功后动态生成对应的路由，并在路由实例中添加这些动态路由。用户登录后，就可以根据角色访问其对应的页面。注意在Vue3中，需要使用`createRouter`和`createWebHistory`来创建路由实例和路由历史记录。