Vue-Router 动态展示路由

前言：

Vue Router 的动态展示路由实现：

1. 路由定义：在 Vue Router 中，你需要定义路由。路由定义包括一个路径和对应的组件。通过配置不同的路由，你可以定义多个页面的路由及其对应的组件。
2. 路由匹配：当用户访问某个特定的路径时，Vue Router 会根据预定义的路由进行匹配。匹配成功后，Vue Router 会加载对应的组件，并将其渲染到页面上。
3. 动态路由参数：除了静态的路由路径外，Vue Router 还支持动态路由参数。使用冒号（:）来定义动态片段，这样可以在路径中传递参数。例如，定义一个动态路由参数为 id 的路由，可以是 /users/:id。
4. 路由传参：在动态展示路由过程中，经常需要传递一些参数给路由组件。Vue Router 提供了多种方式来传递参数，比如通过路由路径传参、查询参数、路由元信息等。
5. 编程式导航：Vue Router 还提供编程式导航的方式，可以通过 JavaScript 的方式进行页面跳转和参数传递。这样你可以根据业务逻辑或用户操作，动态地切换路由并展示相应的组件。

学习任务：

• 前端跨域多种处理方式
• Vue 实战: 穿梭框+全选+模糊查询
• 如何理解 TS 接口、泛型、泛型约束
• Vue 动态路由权限管理
• Vue 3.2 + Echarts5 地图展示 

---

权限管理系统在 Vue 是如何实现的
 

Day1 学习目标：

1. 请求、响应拦截器
2. async + await 的具体运用
3. 路由拦截及动态添加路由
4. Vuex 数据缓存

 1、角色权限

登录的用户不同，首页展示不同

角色分类：管理员、会员、游客

首页展示：

• 管理员 :首页  企业管理 设备管理 会员管理
• 会员: 首页 会员管理
• 游客:首页

import axios from 'axios'
axios.defaults.baseURL = `http:`;
//请求拦截器
axios.interceptors.request.use(config=>config);
//响应拦截器
axios.interceptors.response.use(res=>{
    return res,
},err=>{
    return Promise.reject(err)
})
export default axios;

1. 配置默认请求基础URL：代码第二行使用 axios.defaults.baseURL 设置了请求的基础 URL 地址。在实际发送请求时，可以使用相对路径来代替完整的 URL 地址。
2. 请求拦截器：代码第四行开始定义了一个请求拦截器，使用 axios.interceptors.request.use 方法。请求拦截器可以在发送请求之前对请求进行一些处理或者修改配置。在这个示例中，请求拦截器直接返回了请求的配置对象 config，表示不对请求做任何特殊处理。
3. 响应拦截器：代码第八行开始定义了一个响应拦截器，使用 axios.interceptors.response.use 方法。响应拦截器可以在接收到响应后对响应进行一些处理。在这个示例中，响应拦截器直接返回了响应对象 res。如果发生了错误，可以通过第二个参数 err 来捕获错误，并使用 Promise.reject(err) 返回一个被拒绝的 Promise。
4. 导出 Axios 对象：代码最后通过 export default axios 导出了 Axios 对象，使得其他文件可以导入并使用该对象进行 HTTP 请求。