这个问题要从一个想法说起。 D2Admin 是一个开源的，前端中后台集成方案，原先是基于 vue-cli2，大概是向 vue-cli3 过渡时， 作者老李，想在页面右下角加个 Toggle 点击，跳到当前页面源码对应的 github 页面。 确实很实用的功能，D2Admin 的 Demo 页面太多了，想看某个页面的源码，对于不熟悉项目目录结构的新手很不友好。 这些页面统一为 .vue 组件，那么转换一下：如何获取 vue 单文件自身源码路径？ 目前经历了三个方案，最终目...
今天在实现一个小功能的时候，遇到一个问题，使用vue-router获取上一页面的url信息，我尝试了多种方式，发现使用vue-router的canDeactivate钩子实现这个功能最为方便，现在将我的实现代码总结如下: 项目使用的是vue-cli,直接贴代码 export default {mixins: [],vuex: {actions: {fetchCertificates},},data() {return {}},route: {data() {this.$root.showLoading();return this.fetchCertificates().then((res) => {this....
vue获取时间戳转换为日期格式。 方法一为转载黄轶老师的format方法：出处（黄轶老师github https://github.com/ustbhuangyi）； // date.js export function formatDate (date, fmt) {if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + ).substr(4 - RegExp.$1.length));}let o = {M+: date.getMonth() + 1,d+: date.getDate(),h+: date.getHours(),m+: date.getMinutes(),s+: date.getSeconds()};fo...
这个地方坑比较多，查看网上并没有详细的文档，新手一般写到这里很痛苦。这里我只介绍一下我解决的方案，虽然它不是最好的，但是可行的方案； 总体分两步 1）跳到微信支付链接，它会自动拼接上code 2）获取本网址，截取code； 在vue中哪里获取code？ 在路由钩子函数beforeEach获取。（如果想了解beforeEach的用法，请关注我下一篇博客）。我们去请求微信网址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +appid ...
1.先在router.js中配置路由 {path: /movieDetail/:movieId,name: movieDetail,component:movieDetail}2.获取详情页的id,并派发父组件事件（movieList.vue)页面<li v-for="(item,index) in movies" :key="index" @click="selectItem(item)">。。。。。。。 </li>methods:{selectItem(item){//console.log(item.moveId);//var item = item.moveId;this.$emit(select,item);}3.在movieShow页面引用movieList.vue页面 <movieList :mov...
本次项目做到一个点赞功能，即分享出去一个页面给微信好友，微信好友点开并点赞，需要将点赞用户的微信昵称，微信头像以及微信openid，微信unionid（这个需要关注公众号才会有该字段）传给后端，记录点赞人的相关信息 微信网页授权 1、微信公众号网页授权配置，详见官网 2、关于网页授权的两种scope的区别说明 （详细见官网）－scope=snsapi_base 获取微信用户openid,获取后直接跳转业务页面，不需要用户操作－scope=snsapi_userin...
本文实例讲述了vue组件数据传递、父子组件数据获取，slot,router路由功能。分享给大家供大家参考，具体如下： 一、vue默认情况下，子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script><style></style> </head> <body><div id="box"><aaa></aaa></div><script>var vm=new Vue({el:#box,data:{...
一、背景 先简单介绍一下现在项目情况：前后端分离，后端服务是Java写的，前端是Vue+ElementUI。 最近的一个需求是：通过后端Api去获取前端路由表，原因是每个登录角色对应的前端路由表可能是不一样的（权限问题） 二、遇到的问题 因为前端Vue+ElementUI项目是单页应用——即只有一个index.html页面，如果路由从远程获取的话，每次F5或点击刷新按钮刷新页面的时候，就会找不到对应的路径而报404错误 三、解决方案 1、通过api远...
在 v-for 代码块中，我们可以完全地访问父级作用域下的属性。 v-for 还支持可选的第二个参数，作为当前项的索引。 也可以使用 v-for 来遍历对象的属性。 还可以提供第二个参数，作为对象的键名(key)： <body> <div id="box"> <ul> <li @click="onclick(index)" v-for="(item,index) in dataList">{{item.name}}</li> </ul> </div> </body> <script src="assets/vue/vue.js"></script> <script> new Vue({ el:"#box", data:{ d...
如下所示； props: {example: {type: Object,default() {},}, }, watch: {example: function(newVal,oldVal){// newVal 为改变后的值// 继续要处理的事件}, },使用watch 替代 mounted。 通过watch属性来响应数据的变化，当数据改变时执行异步操作。总结 以上所述是小编给大家介绍的解决vue2 在mounted函数无法获取prop中的变量问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对...
思路 进入页面若未登录，跳转至登陆页面若已登录，从cookie中获取用户信息，并执行后续操作2. 登录页面，存入cookie（setCookie） import {setCookie,getCookie}from src/js/cookieUtilmethods: {async cheack_n_p () {if( this.checkCode === this.pwd) {this.loginData = await getUserInfo(this.uname, this.pwd, this.adminPhone);if (this.loginData.res !== 0) {setCookie(userName,this.uname);setCookie(userPwd,this.pwd,...
一. 加载本地图片 1.图片目录 2. 在data中配置图片路径 data() {return {formData: {avatar: require(@/assets/icon1524737568182.png),motto: xxxxxxxxxx},routers: this.$router.options.routes}}3. 在需要的地方引入图片 <div class="avatar"><img :src="formData.avatar" alt=""></div>二. 加载请求获取到的图片 1.配置文档build/webpack.base.conf.js {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: url-loader,exclude: ...
需要准备的东西：Vue+axios+Vuex+Vue-router 1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.data); this.$message.success(登录成功); let data = res.data; //根据store中set_token方法将token保存至localStorage/sessionStorage中，data...
最近使用elment ui和vue.js，遇到需要像c:foreach类似的效果，就找了 vue的API：https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if element ui：http://element.eleme.io/#/zh-CN/component/input 用法：<el-card class="box-card" v-for="(month,index) in monthdata" v-if="index==0" v-bind:month="month" v-bind:index="index"><div slot="header" class="clearfix"><span style="line-height: 36px;font-size:17px ;c...
在做vue项目的时候难免会用到循环，可是但我们后台数据返回多条记录而且是多层嵌套关系的时候，我们需要获取当前第几次循环此时就会出现问题。 下面给大家介绍两种方式，第一种是基于数学公式：第一次循环*（第二次循环总长度）+1+第二次循环 可以获取当前第几次循环 第二种方法：是在方法中进行计算返回当前下标。废话不多说先看一下效果吧具体代码如下： 测试数据json字符串： parentList: [{childList: [{index: 1,childName: "...