分类：Vue

2020
10-09

解决vue addRoutes不生效问题

动态添加导航栏时，addRoutes不生效解觉1、在addroutes前，使用router.options.routes=XXXXX的方法手动添加2、使用作者的方法，在store里维护一个routes对象，然后使用这个对象遍历生成侧面导航栏补充知识：vue-router动态添加路由router.addRoutes(routes)遇到的二次登陆路由冲突问题解决起因在当前项目中使用的iview-admin,路由要根据权限动态生成，是在登录后获取当前用户权限内的路由使用vue-router的addRoutes()方法动... 继续阅读 >

2020
10-09

vue 解决addRoutes多次添加路由重复的操作

我就废话不多说了，大家还是直接看代码吧~importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)constcreateRouter=()=>newRouter({mode:'history',routes:[]})constrouter=createRouter()exportfunctionresetRouter(){constnewRouter=createRouter()router.matcher=newRouter.matcher//therelevantpart}exportdefaultrouter找老外的文档解决的问题，在登出的模块调用resetRouter方... 继续阅读 >

2020
10-09

Vue优化:常见会导致内存泄漏问题及优化详解

如果你在用Vue开发应用，那么就要当心内存泄漏的问题。这个问题在单页应用(SPA)中尤为重要，因为在SPA的设计中，用户使用它时是不需要刷新浏览器的，所以JavaScript应用需要自行清理组件来确保垃圾回收以预期的方式生效。因此在vue开发过程中，你需要时刻警惕内存泄漏的问题，这些内存泄漏往往会发生在使用Vue之外的其它进行DOM操作的三方库时，请确保测试应用的内存泄漏问题并在适当的时机做必要的组件清理。下面是我... 继续阅读 >

2020
10-08

vue中的v-model原理,与组件自定义v-model详解

VUE中的v-model可以实现双向绑定，但是原理是什么呢？往下看看吧根据官方文档的解释，v-model其实是一个语法糖，它会自动的在元素或者组件上面解析为:value=""和@input=""，就像下面这样//标准写法<inputv-model="name">//等价于<input:value="name"@input="name=$event.target.value">//在组件上面时<div:value="name"@input="name=$event"></div>1.当在input输入框输入内容时，会自动的触发input事件，... 继续阅读 >

2020
10-08

vue addRoutes路由动态加载操作

需求：增加权限控制，实现不同角色显示不同的路由导航思路：每次登陆后请求接口返回当前角色路由核心方法：vue-router2.2.0的addRoutes方法+vuex以下是我实现的获取菜单路由的方法，我将该方法的调用放在首页组件的生命钩子中，即便用户刷新浏览器清空了路由还是会重新调用接口获取，不至于会丢失。同时考虑到会有切换用户的可能，所以不将获取到的路由信息保存到cookie或者localstorage当中获取菜单之前先判断routerState，避免... 继续阅读 >

2020
10-08

vue+element使用动态加载路由方式实现三级菜单页面显示的操作

需要用到中间件的方式,这样就可以实现了我们想要的方式publish-center.vue<template><router-view></router-view></template><script>exportdefault{}</script><el-menu:default-active="$route.path"class="el-menu-vertical-demoel-menus"@open="handleopen"@close="handleclose"@select="handleselect"unique-openedrouterv-show="!collapsed"><divclass="tools"@click.prevent="collapse"><i>|||</... 继续阅读 >

2020
10-08

Vue登录拦截 登录后继续跳转指定页面的操作

在开发中我们经常遇到这样的需求，需要用户登录后才可以访问该页面，如果用户没有登录点击该页面时则自动跳转到登录页面，登录后又跳转到链接的页面而不是首页，这种问题该如何去做呢？1、在路由器router下的index.js的配置中，给需要拦截登录的页面的路由上加一个meta:{loginRequest:true},其中loginRequest变量自己可以随意定义2、在main.js文件里面添加beforeEach钩子函数解释：router.beforeEach((to,from,next)=>{... 继续阅读 >

2020
10-08

vue 解决uglifyjs-webpack-plugin打包出现报错的问题

楼主最新对已做项目进行打包优化，配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin具体代码如下npminstalluglifyjs-webpack-plugin-DconstUglifyJsPlugin=require('uglifyjs-webpack-plugin')configureWebpack:config=>{if(isProduction){config.plugins=config.plugins.concat([newUglifyJsPlugin({uglifyOptions:{compress:{... 继续阅读 >

2020
10-08

vue 出现data-v-xxx的原因及解决

现象：在Vue开发中，会遇到html被浏览器解析后，在标签中出现'data-v-xxxxx'标记，如下：<divdata-v-fcba8876class="xxx">aaa</div>原因：来看官方解释：<stylescoped>@media(min-width:250px){.list-container:hover{background:orange;}}</style>TheoptionalscopedattributeautomaticallyscopesthisCSStoyourcomponentbyaddingauniqueattribute(suchasdata-v-21e5b78)toelementsandcomp... 继续阅读 >

2020
10-08

vue 实现根据data中的属性值来设置不同的样式

style动态赋值margin-top的值根据choosePaperFlag的值来设置利用三元表达式补充知识：vue条件判断绑定内联样式当需要判断条件来绑定内联样式时可以三元运算符判断，然后绑定一个对象:style="!areaCode||!phoneNumber||!receivedCode||!verification?'{backgruond:#ccc}':$store.state.store.config.background"以上这篇vue实现根据data中的属性值来设置不同的样式就是小编分享给大家的全部内容了，希望能给大家... 继续阅读 >

2020
10-08

解决Vue中使用keepAlive不缓存问题

1.查看app.vue文件，这个是重点，不能忘记加（我就是忘记加了keep-alive）<template><div><keep-alive><router-viewv-if="$route.meta.keepAlive"></router-view></keep-alive><router-viewv-if="!$route.meta.keepAlive"></router-view></div></template>2.查看router.js{path:'/loanmessage',component:loanmessage,name:'loanmessage',meta:{keepAlive:true,//代表需要缓存isBack:... 继续阅读 >

2020
10-08

vue根据条件不同显示不同按钮的操作

我就废话不多说了，大家还是直接看代码吧~<templateslot-scope="scope"><el-buttonv-if="scope.row.isDeleted===0"@click="lowerShelf(scope.row.id)"size="mini"type="primary"plain>下架</el-button><el-buttonv-elsesize="mini"type="primary"plain>已下架</el-button></template>补充知识：vue过滤器之根据不同的类型渲染不同的字段本文旨在分享如何利用vue过滤器，实现简单、高效的对同一个字段不同的字段值，... 继续阅读 >

2020
10-08

vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作

在项目中做联系人的添加和编辑功能，点击父级页面的添加和编辑按钮，用的是同一个表单弹窗，数据添加和编辑用同一个弹窗，没有在弹窗使用v-if，性能不是很好，弹窗中有表单，在编辑弹窗表单数据之后关闭弹窗，然后点击添加的时候，弹窗里的表单数据还是之前编辑的数据，无法做到清空表单数据，接下来是解决方法了，嘿嘿首先是不管是添加还是编辑，都需要将子组件需要的对象属性一一写出来，传给子组件，然后是主要用到了el-form表... 继续阅读 >

2020
10-08

浅谈vue中get请求解决传输数据是数组格式的问题

qs的stringify接收2个参数，第一个参数是需要序列化的对象，第二个参数是转化格式,一般默认格式是给出明确的索引，如：arr[0]=1&arr[1]=2//indices是index的复数格式，因此indices是索引的意思//bracket是括号的意思，因此arrayFormat:'brackets'代表数组下标为空[]qs.stringify({arr:[1,2,3]},{indices:false})//arr=1&arr=2&arr=3qs.stringify({arr:[1,2,3]},{arrayFormat:'indices'})//arr[0]=1&arr[1]=2&arr[2... 继续阅读 >

2020
10-08

VUE使用axios调用后台API接口的方法

引言    Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。我们都知道VUE更多是注重前段用户界面的渲染合操作，但是如果想到实现前后端之间的交互调用后台API，就需要借助其他组件，如今天要讲到的Axios，下边就重点讲解axios在vue中的使用。 ... 继续阅读 >

2020
10-08

vue cli3.0打包上线静态资源找不到路径的解决操作

项目中遇到打包之后静态资源路径找不到，报如下错误：解决方法是：在项目的根目录下创建vue.config,js文件，在里面配置静态资源的路径，publicPath是配置静态资源路径的属性，vue.config,js文件的代码如下：module.exports={publicPath:'./'}补充知识：vue-cli3npmrunbuild打包后静态资源的配置vue.config.js的配置vue.config.js配置如下：constpath=require('path');constvConsolePlugin=require('vconsole-web... 继续阅读 >