草庐IT

Vue-Instant

全部标签

vue 动态路由/路由权限 解决方案

路由权限思路:1.菜单栏/导航栏(一级权限)在登录成功后,获取后端的权限数据,根据权限数据,展示对应的路由导航或菜单即可;登录成功后,获取的该账号的路由权限数组2.界面的控制如果用户没有登录,用户手动在地址栏输入路由地址,则需要跳转到登录界面.如果用户已经登录,用户手动输入的非权限内的路由地址,则给他跳转到404界面.3.按钮的控制(二级权限)在页面中,有些账号有:添加,删除,修改,增加等权限,有些没有.没有权限的账号在这个页面只是可以浏览页面中的数据,需要对这些按钮禁用or隐藏。4.请求和响应的控制(这一步其实后端也会根据token判断身份信息,来返回数据,可以省略)如果用户通过非常规的手段

Vue3组件通讯六种方式

目前最常用是props/$emit和vuex/pinia,接下来是provide/inject,其他不建议使用;实际项目中,简单父子组件传递采用props/$emit,涉及全局共享的数据一般采用vuex/pinia结合存储对象localStorage/sessionStorage使用1.props/$emit1.props单向数据流,父组件向子组件传递数据,不允许子组件修改props2.支持传递静态或者动态prop,支持多种数据类型,包含数组,复杂对象3.支持prop验证类型检查静态prop//不加冒号动态prop传递对象所有propertypost:{id:1,title:'MyJourne

vue的hash和history模式

路由模块的本质就是建立起url和页面之间的映射关系。hash和history改变URL的同时不会重新加载页面和发送请求。背景知识早期的前端路由通过location.hash实现,其可以获取到url中#号及其后面的参数hash路由模式的实现基于以下几个特性URL中的hash值只是客户端的一种状态,也就是说当向服务器发送请求时,hash部分不会被发送hash值的改变都会在浏览器的访问历史中增加一个记录,因此我们可以通过浏览器的前进、回退按钮控制hash的切换可以通过a标签中的href属性或者js对location.hash进行赋值,来改变URL中的hash值可以用hashchange事件监听has

vue element-UI 实现导出excel 功能

前端项目实现请求后台接口步骤一:安装axios组件,一般使用命令:npminstallaxios--save步骤二:为了项目规范整洁,把一些配置请求后台统一前缀,以及一些拦截器,代码如下(文件在@/utils/request)importaxiosfrom'axios'//createanaxiosinstanceconstservice=axios.create({baseURL:'http://10.246.34.23:10000',timeout:5000})//requestinterceptorservice.interceptors.request.use(config=>{//d

vue-awesome-swiper的正确使用姿势

介绍一下vue-awesome-swiper最靠谱的使用方法。目前网上对于vue-awesome-swiper的使用方法各种坑,要么版本对不上,要么swiper.css引用地址不对,要么swiper-pagination不显示,要么自动轮播失效,反正各种坑让人火大。下面介绍一下自己亲测可用的正确使用方法。首先版本,请使用3.1.3,别想着用什么4以上的或别的版本,目前就这个版本最稳定,不相信可以自己去测试,掉坑里可别怪没提醒!第一步:安装//直接安装版本3即可,自动会选择3.1.3版本cnpmivue-awesome-swiper@3-S//或者手动指定cnpmivue-awesome-swi

给学生党的vue教程(vue全家桶+Element)

vue.js这个教程只是给我妹妹写的课外作业,并没有太多高级东西,只适合于有点前端基础的小白,忠于兴趣,诚待文字,取悦自己,理解他人。01--项目准备01-1安装1兼容性:Vue不支持IE8及以下版本,因为Vue使用了IE8无法模拟的ECMAScript5特性。但它支持所有兼容ECMAScript5的浏览器。2直接用引入:开发版本:https://cn.vuejs.org/js/vue.js生产版本:https://cn.vuejs.org/js/vue.min.js3[CDN]https://cn.vuejs.org/v2/guide/installation.html#CDN"CDN"对于

vue-router 之 keep-alive

本文基于Vue2.0keep-alive简介keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。用法也很简单:propsinclude-字符串或正则表达,只有匹配的组件会被缓存exclude-字符串或正则表达式,任何匹配的组件都不会被缓存//组件aexportdefault{name:'a',data(){return{}}}可以保留它的状态或避免重新渲染可以保留它的状态或避免重新渲染遇见vue-router西湖雨好大,借把伞躲躲雨...router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存:然而产品汪

js、ts、vue2、vue2+ts、vue3、vue3+ts复制文本

js版本解释navigator.clipboard剪贴板ClipboardAPI为Navigator接口添加了只读属性clipboard,该属性返回一个可以读写剪切板内容的Clipboard对象。在Web应用中,剪切板API可用于实现剪切、复制、粘贴的功能。只有在用户事先授予网站或应用对剪切板的访问许可之后,才能使用异步剪切板读写方法。许可操作必须通过取得权限PermissionsAPI的"clipboard-read"和/或"clipboard-write"项获得。解释document.execCommand已弃用:不再推荐使用该特性。虽然一些浏览器仍然支持它,但也许已从相关的web标准中移

Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)

一、父传子、父传后代方式一:子通过props来接收父组件:父组件引入子组件时,通过子组件传值。备注:这种方式父传值很方便,但是传递给后代组件不推荐(父->子->孙),且这种方式父组件不能直接修改父组件传过来的数据。父组件importChildfrom"./child";exportdefault{name:'parent',components:{Child},data(){return{parentValue:"父组件内的值"}}}子组件:子组件通过props即props:{parentValue:{type:String,default:""}}来接收父组件传过来的值子组件{{parent

vue element-ui实现获取短信验证码 ,60秒倒计时及页面

cc废话不多说先上效果图  vue页面布局获取验证码{{count}}scss样式 /*短信验证码css*/.pr{position:relative;}.code-btn{width:100px;height:20px;position:absolute;top:10px;right:5px;z-index:222;color:#ef8466;font-size:14px;border:none;border-left:1pxsolid#bababa;padding-left:10px;background-color:#fff;cursor:pointer;}逻辑js//获取短信验证码ge