Vue中使用v-charts默认展示图表,引入依赖: package.json: "dependencies": { "echarts": "^4.9.0", "v-charts": "^1.19.0" } 类似如下代码: <VeRing :data="chartData" :title="titleObject"></VeRing> // or <ve-pie :title="titleObject" :data="chartData" ></ve-pie> //其…

2021-11-03 0条评论 1856点热度 0人点赞 admin 阅读全文

默认的vue程序路由使用的是#hash模式,地址栏上会出现http://localhost:8080/#/user 这样的,比较难看,对于强迫症晚期患者来说,必须要解决。 我们在开发中,很容易解决,只需要在router/index.js下找到如下代码修改成: const router = new VueRouter({ mode: 'history', # 这里加上,就换成history模式了 base: process.env.BASE_URL, routes }) export default router 开…

2021-10-31 0条评论 507点热度 0人点赞 admin 阅读全文

vue项目中,如果地址栏改变(例如菜单是根据参数改变而不同的:/info?id=1里面$router.push或者replace到/info?id=2),是不会进入created() {}或者mounted(){}或者activated(){}等生命周期方法的 我们可以利用watch来监听query是否改变 watch: { '$route.query.id'() { console.log('$route.query.id called: '+ this.$route.query.id); // 你的代码逻辑 }…

2021-10-29 0条评论 464点热度 0人点赞 admin 阅读全文

Vue项目中,默认的情况,如果某个页面跳转到了下一页,在下页面返回后($router.go(-1)),上一个页面总是会自动刷新(进入created方法),导致上页面的状态就没有了,这样的方式往往不是我们想要的! 可以使用<keep-alive></keep-alive>来解决这个问题,它是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 在 App.vue里面(组件最开始的地方),有如下代码: <template> <div id="app"&g…

2021-09-27 0条评论 1000点热度 0人点赞 admin 阅读全文

如果一个Vue项目比较大,开发人员也多的情况下,如果一个路由文件都放在一起,不利用协同开发,容易引起冲突 Vue的脚手架默认搭好后,路由文件是在src/router/index.js里面,里面包含了所有的路由信息,我们可以对整个项目进行梳理,按照逻辑功能模块进行拆分,比如拆一个消息(message)模块,相关的路由我们都建立在src/router/message.js: const routers = [ { path: '/message/home', name: 'messageHome', title: '消…

2021-09-25 0条评论 1078点热度 0人点赞 admin 阅读全文

在之前的文章中,后端SpringBoot解决跨域问题,使用的如下方法:https://blog.terrynow.com/2021/08/18/springboot-api-allow-cross-origin-how-to/ 不过前端vue也要做相应的配置,例如使用Proxy的方式请看:https://blog.terrynow.com/2021/08/31/vue-axios-cors-problem-sovled/ 不过本次发现一个不使用Proxy的方式: 首先,如果不做任何修改,我们用axios请求其他链接…

2021-09-22 0条评论 1400点热度 0人点赞 admin 阅读全文

一些Mobile版本的网站,上面顶部菜单图标,按上去可以展开菜单,再点击,可以收回菜单,如图所示: 下面分享我项目中用到的菜单Toggle效果的代码 利用CSS画出三个横线,以及一个叉叉,然后加入动画效果 <!doctype html> <html> <head> <style> .menu-toggle .span { height: 2px; margin: 7px 0 0 0; transition: all .3s ease-out; backface-vis…

2021-09-05 0条评论 849点热度 0人点赞 admin 阅读全文

Vue开发的时候,由于本地的浏览器环境是http://localhost:8080类似这样的地址,而API地址,很可能是后端开发的,不在同一台而AXIOS导致跨域无法请求的问题。 可以利用vue的代理功能,让vue使用proxy去转发流量给API服务器,从而避免跨域问题 假设API服务器的API链接都是/api开头的,如果是开发环境,baseURL就设置为api,是相对路径,这样根据下面的vue.config.js的配置,匹配规则的都转发给proxy服务器 http.js import axios from 'ax…

2021-08-31 0条评论 1258点热度 0人点赞 admin 阅读全文

很多时候导出(或者下载)文件的时候,用的是超链接的方式,相当于window.location.href='xxx.xlsx'的方式,很容易实现文件的导出下载,不过一般是针对API采用GET的方式,如果后台API是POST的方式呢? 其实也很简单,这里介绍在Vue.js下采用了axios来post请求,并下载文件,示例如下: downloadExportExcel() { var payload = {"start":"2021-07-11","end":"2021-07-22"}; axios.post('http…

2021-08-09 0条评论 872点热度 0人点赞 admin 阅读全文

遇到一个问题,在Vue中使用img显示图片,如下代码是可以显示出来图片的。 <!--使用@代表根目录--> <img src="@/assets/add.svg"  @click="addClicked"/> 但是如果通过绑定的方式(或者说使用动态的src的时候)就不行了: <template> <div> <img :src="addImgSrc"  @click="addClicked"/> </div> <template> …

2021-07-05 0条评论 1260点热度 0人点赞 admin 阅读全文
134567