Vue项目编译后，生成的dist文件夹下的资源文件，部署到服务器后，如果是http://www.example.com/这样的路径，是没有问题的；但是如果部署到二级目录后，例如 http://http://www.example.com/vue/后，就会发生问题，通过浏览器右键-检查 发现网页加载css和js都是从http://www.example.com/app.xxxx.js 或者http://www.example.com/app.xxxx.css 这样的，显然vue下的资源文件的加载的相对路径，还是按照一…
iView中Upload上传组件，配合表格组件，想要实现这样的功能（即要有拖拽上传，还有上传列表，以及上传进度），如图： 话不多说，直接上干货代码 Html部分 <row class="" style=""> <i-col span="20"> <upload ref="upload" :show-upload-list="false" :on-success="handleSuccess" :on-error="handleError" :format="allowedFormat"…
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…
