分类：VUE

2020
10-09

基于vue 动态菜单 刷新空白问题的解决

1.先确认自己在route.js或者main.js中有没有使用路由守卫vue.beforeEach和vue.addRouters()促使页面每次刷新，重新根据后台返回数据生成动态路由，就像你在登陆时做的事情一样。代码示范注意点：//注意：确定自己避免了路由守卫进入死循环letoneRun=true;//通过oneRun变量控制避免陷入死循环router.beforeEach((to,from,next)=>{if(oneRun){oneRun=false;//必须在creatNewRouter()执行createNewRouter();... 继续阅读 >

2020
10-09

解决vue动态下拉菜单 有数据未反应的问题

问题出现在当时后台数据会返回到data中但是没有出现下拉菜单，查询资料发现Vue的this理解有误jsp下拉菜单<selectname="plantModelParentId"v-model="vueObj.plantModelParentId"@change="selectChange"><optionvalue=""></option><optionv-for="(item,index)inselectlist":value="index">{{item.plantModelName}}</option></select>JSnewVue({el:"#vueadd",data:{vueObj:{},selectlist:[]},created... 继续阅读 >

2020
10-09

在vue项目中利用popstate处理页面返回的操作介绍

需求背景：项目中需要做一个返回确认，避免用户误触返回键而退出当前页面。原理：利用history和浏览器刷新popstate状态实现：1、在mounted()阶段判断并添加popstate事件监听，History.pushState()（参数：一个状态对象，一个标题（现在被忽略了），以及一个可选的URL地址），注意：IOS版的微信，是会立即触发popstate事件，所以需要pageshow做下处理，（当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括... 继续阅读 >

2020
10-09

解决vue字符串换行问题(绝对管用)

vue中用{{}}进行数据绑定的时候，如果我么你想让字符串换行是不生效的解决办法，不用上边的方式进行数据绑定，用v-html标签代替{{}}data中的str为"<b>1111</b><br/>2222"例1，<div>{{str}}<div>例1效果<i>1111</i><br/>2222例2，<divv-html="str"><div>例2效果11112222补充知识：vue的this.$router.push()方法跳转路由带参数这个方法需要注意一点，path和params不能同时使用使用了path，params就失效了解决方... 继续阅读 >

2020
10-09

vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作

最近开发vue项目，遇到的一些问题，这里整合一下，看到一些博客已经有写相关知识，然后自己再次记录一下。这是关于vue路由相关比较常见的问题，以后遇到相关路由的问题，会不断更新这篇博客。需求1：从填写表单A页面跳转到B页面，然后再从B页面返回到A页面，实现A页面的所填的数据保留一.设置路由缓存：1.App.vue中加入<keep-alive>具体代码如下：<template><divid="app"><!--<imgsrc="./assets/logo.png">--><keep-alive>... 继续阅读 >

2020
10-09

Vue Router中应用中间件的方法

中间件是我们在软件开发中的一个古老而强大的概念，当我们在应用程序中使用路由相关模式时，它非常有用。如果您不太了解中间件的含义，Nodejs框架Express里的中间件可以帮助您了解它们的工作原理。但是，中间件仅适用于后端吗？不，当应用程序中有路由时，中间件在前端或后端中就会非常常见。比如现在流行的单页应用程序。有一些示例可以说明，何时可以使用中间件：不允许未登录用户访问您的网页。仅允许某些类型的用户查看页... 继续阅读 >

2020
10-09

vue-路由精讲 二级路由和三级路由的作用

1、我们继续上一个案例vue--路由精讲制作导航--从无到有，在about文件夹下创建一些文件夹。如下：2、编写about.vue代码。当我们点击导航中“关于我们”，就会显示该部分内容。代码中写了四个可供点击后可以跳转的模块。和<router-view></router-view>表示你点击了哪个组件，哪个组件就会渲染到这里来。其中注意：css样式,我们直接引入bootstrap中的导航的样式，在标签中直接添加class属性的值就可以了。about.vue代码... 继续阅读 >

2020
10-09

浅谈vue 二级路由嵌套和二级路由高亮问题

第一层路由我写在app.vue里面。如图所示：footer.vue：二级路由是这样：index.js里面的配置：效果图：效果出来了，又出现新的问题，就是点击二级路由的时候，默认的二级路由高亮不会去掉，如图所示：在网上看到别人用exact方法，即在默认的二级路由里面加上exact，如图所示：补充知识：vue-子路由-路由嵌套描述：子路由，也叫路由嵌套，采用在children后跟路由数组来实现，数组里和其他配置路由基本相同，需要配置path和componen... 继续阅读 >

2020
10-09

vue项目实现设置根据路由高亮对应的菜单项操作

高亮显示菜单是很常见的一个场景首先，在router-link标签上绑定对应的路径然后在css里面设置router-link-active类的样式即可切换路径的时候高亮对应的菜单也可以在router路由数组里面设置meta信息，然后根据这个信息来判断是否高亮（这里可以循环生成菜单，不过我没有写）只是说一下思路这样即可根据路由实现对应的菜单高亮了，我个人认为第二种比较灵活，如果菜单嵌套很多可以用第二种补充知识：vuecli项目怎样使用jsx有时候用jsx... 继续阅读 >

2020
10-09

vue+ElementUI 关闭对话框清空验证,清除form表单的操作

前面跟大家提到过elementUI验证的问题，那么今天就来看看点击对话框和关闭按钮怎么清空验证，清空form表单，避免二次点击还会有验证错误的提示1、首先在你的对话框取消按钮加一个click事件，例如：（ps:：callOf里面的addGroupData和ref一一对应起来）<divslot="footer"class="dialog-footer"><el-button@click="callOf('addGroupData')">取消</el-button><el-buttontype="primary"@click="addgroupList('addGr... 继续阅读 >

2020
10-09

antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作

废话不说，上代码！<a-menutheme="dark"mode="inline":selectedKeys="[$route.path]"><a-menu-item:key="'/home'"><router-linkto="home"><a-icontype="user"/><span>nav1</span></router-link></a-menu-item><a-menu-item:key="'/about'"><router-linkto="about"><a-icontype="video-camera"/><span>nav2</span></router-link></a-menu-it... 继续阅读 >

2020
10-09

通过vue刷新左侧菜单栏操作

今天完成了手头任务就想着做点什么，刚好领导让我看看项目左侧菜单栏不刷新的问题，我也是刚刚接触vue，很多东西都还不是很熟练，这也是我的第一篇自己写的博客，感觉还是很兴奋的，我觉得写博客这个习惯要一直养成，不但总结了自己一天的工作所得，而且也是对自己的一种良好习惯的养成。下面进入正题。这个是我们html里面的超链接，而我们的点击事件的跳转就是通过这个超链接实现的。<el-menu-itemindex="3-1"><ahref="#/commod... 继续阅读 >

2020
10-09

Vue页面手动刷新,实现导航栏激活项还原到初始状态

场景描述：在页面中存在顶部导航和左侧导航，左侧导航和右侧内容区使用了命名视图实现，点击左侧导航的链接时，右侧内容区相应显示不同组件内容。问题：在当前链接手动刷新浏览器（例如：浏览器地址为/enterprise/list），顶部导航激活项还原到初始状态（这里默认是“工作台”项）。原理：每次刷新都会重新实例化Vue，也就是会调用created方法。<template><el-menu:default-active="defaultActiveIndex"class="el-menu-demo"mo... 继续阅读 >

2020
10-09

vue 导航菜单刷新状态不消失,显示对应的路由界面操作

使用vueelement-ui框架构建公共导航栏（https://element.eleme.cn/#/zh-CN/component/menu）按F5刷新就会返回默认定义的路由，使用"$route.path"刷新后还是在最新的一个路由：<el-menu:default-active="$route.path"></el-menu>补充知识：vue动态菜单刷新空白解决方案1.先确认自己在route.js或者main.js中有没有使用路由守卫vue.beforeEach和vue.addRouters()促使页面每次刷新，重新根据后台返回数据生成动态路由，就... 继续阅读 >

2020
10-09

解决vue-router路由拦截造成死循环问题

笔记：vue-router路由拦截造成死循环,在做路由拦截的时候，一直出现死循环.router的index.js文件路由配置constrouter=newRouter({routes:[{path:'/login',name:'login',component:Login,meta:{isShow:true}},{path:'/',component:Layout,redirect:'/home',meta:{title:"首页菜单"},children:[{path:'home',name:'home',component:()=>import('@/views/Hmoe'),meta:{title:"首页"}}],}]})... 继续阅读 >

2020
10-09

Vue基于iview table展示图片实现点击放大

首先先安装依赖：npminstallv-viewer--save然后全局引入，我这边是在main.js里面操作写的：importViewerfrom'v-viewer'import'viewerjs/dist/viewer.css'然后注册下：Vue.use(Viewer)Viewer.setDefaults({Options:{'inline':true,'button':true,'navbar':true,'title':true,'toolbar':true,'tooltip':true,'movable':true,'zoomable':true,'rotatable':true,'scalable':true,'transition':true,'... 继续阅读 >