Vue3-黑马（十二）

目录：

（1）vue3-router-图标的二次封装-jxl组件

（2）vue3-进阶-动态路由

（3）vue3-进阶-动态路由2

---

（1）vue3-router-图标的二次封装-jxl组件

以.vue结尾结尾的单文件组件，绝大多数情况下使用单文件组件，但是有时候不太灵活，就应该使用第二类组件，函数式组件，函数式组件生成html代码，简单的话还好，麻烦的话也比较难，所以呢现在的前端框架还支持javascript的一种扩展语法jsx，用了jsx可以说就可以直接在javascript写tml代码了，比用函数式组件用h函数简单

安装jsx：

进行配置：在vite.config.ts中进行配置：vuejsx

 

 新建一个文件：

在主页组件导入：

 

加入Hi组件 

 

 定义属性：

 

 

新建组件文件：图标组件

 导入主页组件：

图标组件还生效 

 

 （2）vue3-进阶-动态路由

创建跟组件A6，和路由：

 

 

用户登录之后根据用户的角色，看到的菜单是不一样的。因此看到的路由菜单是动态的，根据权限不同看到的不一样，这就要求数据库把路由菜单管理起来

 

 

 

 

 

 

 

 

 clientRouter：客户端的静态部分

 

添加方法获取动态部分：

 重置路由

 

 

定义类型：

 

 （3）vue3-进阶-动态路由2

 全局异常处理器：

 

 

 

 

登录组件：

 

 

 改一下响应拦截器：

导入路由

 

 添加代码：

 

初始转态下路由表中的信息：

 登录下：加上新的路由

 

 

 登录成功跳转页面：

引入Router对象

 

 加跳转代码：

点击登录： 

 

 跳转到主页组件：

 这个时候已经加了路由的配置：可以通过地址栏进行跳转