vue 权限控制的思考
我们的项目一般来说分为三个部分
路由控制
组件控制
接口控制
但是公司的后端是只处理了接口。针对接口进行控制。
在这样的前提下, 对权限控制进行一下梳理
路由控制一般来说在 route 的 mate 里面添加权限。 然后 beforeEach 的时候对权限进行判断。没有对应的权限就跳到404页面
组件控制在网络中搜索,一般都是用自定义指令进行处理。 但是这样有一个问题。 他需要挂载后然后移除子元素
我认为可以用 v-if 来省略这个问题
伪代码
123456789101112131415161718192021222324<template> <template v-if="hasPermission"> <slot></slot> </template></template><script lang="ts">export default { prop: { permission: { ...
vue3 延迟显示 loading
仓库地址 [https://github.com/abigmiu/vue-delay-loading](https://github.com/abigmiu/vue-delay-loading)
用途: 在 x 秒后显示 loading
比如 x = 300
现在请求一个接口。 用时500ms
就会在 300 - 500 这个时间段显示 loading
如果用时 200ms, 就不会显示 loading
用法:
123456789101112<script setup lang="ts">import { ref } from 'vue'const loading = ref(true)setTimeout(() => { loading.value = false}, 5000);</script><template> <div> <div v-loading:2000="loading">&l ...
webpack5 多页面打包配置
# 确定页面结构
123456├── package-lock.json├── package.json├── postcss.config.js├── src 代码├── tsconfig.json└── webpack.config.js webpack配置文件
12345src├── assets 静态资源├── models ts 定义├── pages 页面└── scripts 一些工具函数
123456789src/pages├── course│ ├── index.html│ ├── index.ts│ └── style.scss├── course-intro│ ├── index.html│ ├── index.ts│ └── style.scss
步骤1. 安装 webpack12npm install webpack webpack-cli -D
配置package.json.
--mode 是webpa ...