动态路由

1. 什么是动态路由？在 Vue 项目中如何实现动态路由？

答案：
动态路由指的是根据用户权限、后端返回的数据等动态生成和添加的路由，而不是在前端路由配置文件中静态写死。
在 Vue3（使用 vue-router 4）中，常用的实现方式是：

1. 用户登录后，前端根据后端返回的菜单/权限数据，动态生成路由表。
2. 使用 router.addRoute() 方法将路由动态添加到路由实例中。
3. 动态路由通常配合权限控制、菜单渲染等功能使用。

代码示例：

// 假设后端返回的菜单数据
const menuData = [
  { path: '/admin', component: AdminView, name: 'Admin' }
];
// 动态添加
menuData.forEach(item => {
  router.addRoute(item);
});

---

2. 动态路由和静态路由的区别是什么？各自适用场景？

答案：

• 静态路由：在前端路由配置文件中直接声明，所有用户都能访问，适合公共页面（如登录、404）。
• 动态路由：根据用户权限、角色、后端数据等动态生成，适合需要权限控制的页面（如后台管理、个性化菜单）。

适用场景：

• 静态路由：登录页、注册页、404等无需权限的页面。
• 动态路由：后台管理系统、需要根据用户角色展示不同菜单的系统。

---

3. 动态路由如何与权限控制结合？实现流程是什么？

答案：
实现流程如下：

1. 用户登录，前端获取 token。
2. 前端用 token 请求后端，获取当前用户的权限菜单/路由数据。
3. 前端根据返回的数据，动态生成路由表，并用 router.addRoute() 添加到路由实例。
4. 前端根据权限渲染菜单，未授权页面可重定向到 401/404。

---

4. 动态路由刷新页面后会丢失，如何解决？

答案：
动态路由只存在于内存中，刷新页面会丢失。常见解决办法：

• 在 Vuex/Pinia 或 localStorage 中缓存用户的权限和菜单数据。
• 页面刷新时，重新根据缓存的数据动态添加路由。
• 可以在 router.beforeEach 守卫中判断路由是否已添加，未添加则重新动态添加。

---

5. 动态路由的常见坑和注意事项有哪些？

答案：

• 刷新丢失：如上所述，需持久化菜单/权限数据。
• 路由重复添加：多次调用 addRoute 可能导致重复，需判断是否已添加。
• 404/重定向问题：动态路由未及时添加，可能导致页面跳转 404。
• 异步加载组件：动态路由配置时，component 推荐用懒加载（如 () => import('...')）。
• 菜单与路由同步：菜单结构和路由结构需保持一致，否则会出现菜单能点但页面 404。

---