18、vue3（十八）：菜单权限，按钮权限，打包，发布nginx

目录

一、菜单权限和路由拆分

1.思路分析

2.深拷贝插件

3.代码实现

4.效果展示

二、按钮权限实现

1.思路分析

2.代码实现

3.效果展示

三、 打包

四、发布到nginx

1.将dist复制到自定义文件夹

2.下载nginx，并修改配置文件

3.启动nginx

4.效果展示

五、感谢支持

---

一、菜单权限和路由拆分

1.思路分析

• 所有路由我们分成三类：
  • 静态（常态）路由
  • 异步路由
  • 任意路由
• 异步路由的数据是我们在登录后获取用户信息上指定的路由，然后动态的将路由的数据放置到路由器，路由器根据放置的异步路由的数据进行渲染相应的路由
• 这里有一个问题，有的路由下面有子路由，因此异步路由的渲染可以通过递归，渲染完一个之后递归渲染子路由
• 渲染完之后需要赋值，但是不能直接赋值给原始的路由对象，不然就把对象的数据给改变了。我们通过深拷贝的方法拷贝一份，然后修改深拷贝的对象内容。注：深拷贝需要安装一个插件
• 我们路由器固定是绑定了固定路由，当我们在异步路由刷新的时候，因为异步路由是实时将数据放置到路由器的，因此在全局守卫的前置守卫中需要等异步路由的数据绑定到路由器中才能跳转，这样就不会有白屏的问题
• 如果我们从admin的账户切换到普通账户&