默认情况下,Vue项目下的页面router.push('/path/to/page')每次路由切换后,如果当前页面已经滚动到中间或者底部的时候,跳到下一个页面,默认也是scoll到相同的位置(中间或者底部),但是我们还是希望到了新页面,当前内容还是滚动到顶端。 这个应该是其他SAP(Single Page Applications )都差不多会遇到的问题。 在每个页面的生命周期mounted下面,写代码让页面滚动到顶部 mounted () { window.scrollTo(0, 0);//滚动页面到最顶端 } …

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

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下的资源文件的加载的相对路径,还是按照一…

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

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"…

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

iView中例如表格Table的column中,一些属性是由render函数渲染的,有时候需要在render函数中,调用data里面的数据,就要用到this.someProperty,不过发现这个时候,this是空的(undefined) 解决办法也比较简单,在data()里面,return前面指定一个变量存储下this,作为缓存来使用,示例如下: data() { // 使用that存储下this实例,以便在column1的render函数下调用 var that = this; return { spinSho…

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

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条评论 3148点热度 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条评论 889点热度 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条评论 920点热度 0人点赞 admin 阅读全文

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

2021-09-27 0条评论 2257点热度 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条评论 2070点热度 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条评论 2118点热度 0人点赞 admin 阅读全文
134567