iView中例如表格Table的column中，一些属性是由render函数渲染的，有时候需要在render函数中，调用data里面的数据，就要用到this.someProperty，不过发现这个时候，this是空的（undefined） 解决办法也比较简单，在data()里面，return前面指定一个变量存储下this，作为缓存来使用，示例如下： data() { // 使用that存储下this实例，以便在column1的render函数下调用 var that = this; return { spinSho…
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> //其…
默认的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 开…
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); // 你的代码逻辑 }…
Vue项目中，默认的情况，如果某个页面跳转到了下一页，在下页面返回后（$router.go(-1)），上一个页面总是会自动刷新（进入created方法），导致上页面的状态就没有了，这样的方式往往不是我们想要的！ 可以使用<keep-alive></keep-alive>来解决这个问题，它是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 在 App.vue里面（组件最开始的地方），有如下代码： <template> <div id="app"&g…
如果一个Vue项目比较大，开发人员也多的情况下，如果一个路由文件都放在一起，不利用协同开发，容易引起冲突 Vue的脚手架默认搭好后，路由文件是在src/router/index.js里面，里面包含了所有的路由信息，我们可以对整个项目进行梳理，按照逻辑功能模块进行拆分，比如拆一个消息（message）模块，相关的路由我们都建立在src/router/message.js: const routers = [ { path: '/message/home', name: 'messageHome', title: '消…
在之前的文章中，后端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请求其他链接…
一些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…
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…
很多时候导出（或者下载）文件的时候，用的是超链接的方式，相当于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…
