![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
HUOLIHUA
平台自动把我文章设置VIP可见真是服了
展开
-
Vue.extend实现命令调用式组件
我们使用element-ui时会发现message-box消息提示是直接通过this.$message引用,而不是每次用的时候都先import然后注册组件。其实它的实现原理也很简单,主要就是使用了Vue.extend方法;接下来我们自己实现一个简单的message-box。先看效果图:1、message-box.vue<template> <transition name="confirm-fade"> <div class="confirm"原创 2021-07-29 09:26:43 · 655 阅读 · 0 评论 -
Vue手动实现v-model(完整demo)
老样子先看效果图第一中实现方式该方式父组件使用v-model时可以传递初值,使用起来毫无违和感。1、父组件代码<template> <div class="module-wrapper"> <div class="parent"> <h3>父组件</h3> <p>值:{{title}}</p> </div> <div class=原创 2021-06-25 13:40:28 · 1625 阅读 · 0 评论 -
vue路由跳转传参
一、使用路由name跳转params传参, 此时刷新页面数据会丢失,地址栏不会显示参数信息.,如果想让参数显示在地址栏中可以在路由设计中路径后面跟:id;地址栏将会以/route-name/123456的形式展现。此时刷新页面数据也不会丢失。this.$router.push({ name: 'routeName', params: { id: '123456' }})目标页接收参数:this.$route.params.id二、使用path跳转quer原创 2021-04-15 10:01:26 · 665 阅读 · 0 评论 -
Vue权限验证(完整demo)
vue权限验证整体思路:1、登录身份验证拿到用户的token2、通过token拿到用户的角色信息(每个角色对应不同的权限,比如admin:超级管理员),3、拿到用户的角色信息后筛选权限相对应的路由信息,通过addRoutes添加路由整体思路说来简单,可是细节也很多。文章末尾有完整案例代码(客户端+服务器端), 先看下效果图,有图为证:语言表达能力有限,直接完整demo代码,运行前端项目之前先npm i --save 安装依赖,一定要先把服务运行起来。...原创 2021-04-15 09:52:32 · 805 阅读 · 0 评论