Vue3+TS Day36 - 带类型提示的useStore、后台路由菜单设计、动态路由设计、父子事件和参数传递

1、如何在vue的template中,使用【@】给【img】添加【src】?

  • 需要把【@】写成 【~@】
<img class="img" src="~@/assets/img/logo.svg" alt="logo" />

2、由于vuex对ts支持不佳,useStore没有类型提示,怎么封装一个有类型提示的?

// types.ts
import { ILoginState } from './login/types'

export interface IRootState {
  name: string
  age: number
}

export interface IRootWithModule {
  login: ILoginState
}

export type IStoreType = IRootState & IRootWithModule

export function useStore(): Store<IStoreType> {
  return useVuexStore()
}

3、在main里面,如何把header的事件传递给nav-menu?

  • ①通过事件总线
  • ②先通过【emits】传给main,再通过【props】传递给nav-menu

4、【重点】后台管理系统,权限菜单路由管理的三种方案,渐渐优化?

  • ①直接注册所有路由,然后通过角色判断具体菜单是否展示!
  • 弊端:能通过URL访问到不该访问的菜单
  • ②前端代码里面写好哪些角色有注册哪些路由
  • 弊端:新增角色需要增加对应角色的路由代码,并且要发布版本
  • ③前端拿到角色对应的菜单数据,然后动态生成路由列表,进行注册。
  • 目前比较完美的方案

5、【重点】由用户菜单动态生成路由的方式也有两种?

  • ① 由后端同时返回path和component,前端进行注册
  • ②由后端返回path,前端维护path和component的映射表
  • 第二种方式较好,因为前端可以自己随时重构代码结构,而不需要依赖于后端数据
image.png

6、【扩展】为什么后端表与表出现‘多对多’的关系,就需要中间加一张关系表?

image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容