关于vue开发的常见问题
一、vue单页面回退丢失参数的问题
可能有些跟我一样的新手同学会遇到一个问题,就是比如我从商品详情跳转到购物车,没问题,但是,购物车页面中点击浏览器的回退按钮,返回到detail页面时,你的动态数据(图片啊,名称啊,价格啊什么的)不见了,只剩下一堆css样式架子在那里,很难受。
这就是单页面回退参数丢失的问题,话不多说,直接说解决方法。
1、首先,我们需要了解一下Vuex。(状态管理)具体大家百度vuex
在vue-cli工程中
npm安装:npm i vuex --save
引入到项目mian.js中:
import Vuex from 'vuex'
Vue.use(Vuex);
定义一个常量
const store = new Vuex.Store({
state: {
songInfo:''
},
mutations: {
//定义函数,比如我要获取songInfo
getSongInfo(state, songInfo) {
state.songInfo = songInfo;
}
}
});
然后全局的vue中加上去store
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
这样,我们main.js的部分就做好了,那么页面部分怎么做呢
我们既然要获取,就要先存
在你存数据的vue页面中,id是参数,可以是数组,变量什么的,要不要看你自己需求
save(id){
//console.log(id);
this.$store.commit("getSongInfo", id);
}
然后接下来就是在你想要获取数据的页面获取储存的东东了
computed:{
hereIsYourData(){
return this.$store.state.songInfo;
}
}
为什么加了个computed计算属性呢?我觉得挺方便的。看看这里说的
https://cn.vuejs.org/v2/guide...
顺便你可以加深对watch和conputed的理解
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter
然后,解决完毕!嘻嘻嘻
二、webpack打包工程上线后,你发现开发者工具的source看到了源码
对,webpack上线配置错了。去到config文件夹下的index.js,里面有个build的内容,把其中的productionSourceMap改成false
三、凡是修改了项目的配置,都要重新npm run dev 哟,因为热重载一般是自动更新修改的页面
四、vue的Post请求到后台语言(php,java,asp啥的),发现post不出去,不报错又没效果
解决方案:加上{emulateJSON: true}。例如:
this.$http.post("url", {
//参数
},{emulateJSON: true}).then(function(res) {
//suc
});
五、发现webpack打包后,页面是空的
可能你的路由mode是history,要改成hash,一般默认是hash。
。。。就大概说这些吧,想不起来了。。。我只是个初学者。。。
最后link一下算是带我入门的导师,慕课网的河畔一角,看了他的视频,讲的很棒
https://coding.imooc.com/clas...
还有我的项目,大家喜欢的话,可以找我要源码,同时跪求!跪求!有大神可以指点我一下子!
http://111.230.91.125:3000/#/
http://111.230.91.125:8080/Vshop/view/index.html
如果你觉得文章不错的话,点个小赞呗,谢谢谢谢,嘻嘻嘻!
关于vue开发的常见问题的更多相关文章
- 【原创】windows下搭建vue开发环境+IIS部署
[原创]win10下搭建vue开发环境 如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安 ...
- vue开发体验
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- vue开发环境搭建及热更新
写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...
- 用Vue开发一个实时性时间转换功能,看这篇文章就够了
前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用 ...
- 用vue开发一个app(4,一个久等了的文章)H5直播平台登录注册(1)
我上一篇关于vue的文章和这一篇时间隔了有点久了.最近终于写完了. 因为我一直想写个有点实绩的东西,而不是随便写一个教程一样东西.结合最近在项目中学到的经验和我的一点创意. 首先介绍下这是个什么! H ...
- 使用vue开发项目需要注意的问题和可能踩到的坑
最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下: 一.生命钩子使用需要注意的地方 1.beforeCreat ...
- vue开发项目详细教程(第一篇 搭建环境篇)
最近做vue做项目碰到了不少坑,看了三天文档便开始上手做项目了,不是我牛b,是因为项目紧,我没有时间去深入学习,所以只能一边学一边做了. 我要做的项目是一个官方网站(包括管理后台),也因为是我第一次使 ...
- windows下搭建vue开发环境+IIS部署
原创]win10下搭建vue开发环境 https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...
- 从零开始搭建vue开发环境及构建vue项目
1.安装node.js 安装完成之后,打开dos(windows+R或者直接windows键打开,输入cmd,按回车键)窗口,输入命令node -v可以查看安装的 node.js版本 node.js自 ...
随机推荐
- asp.net+扫描仪+图片上传
问题: IE浏览器下使用Activex插件调用客户端扫描仪扫描文件并山传,可以将纸质档案(如合同.文件.资料等)扫描并将扫描图像保存到服务器,可以用于合同管理.档案管理等. 通过插件方式调用扫描仪扫描 ...
- iOS设计模式之适配器模式
一,适配器的定义 定义 将一个类的接口转换成客户希望的另外一个接口.适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作 需求场景 需要使用以前开发的“一些现存的对象”,但是新环境中要求 ...
- 2019牛客暑期多校训练营(第六场)C - Palindrome Mouse (回文自动机)
https://ac.nowcoder.com/acm/contest/886/C 题意: 给出一个串A , 集合S里面为A串的回文字串 , 现在在集合S里面找出多少对(a,b),b为a的字串 分析: ...
- POJ 1753 Flip Game (状压+暴力)
题目链接:http://poj.org/problem?id=1753 题意: 给你一个4*4的棋盘,上面有两种颜色的棋子(一种黑色,一种白色),你一次可以选择一个棋子翻转它(黑色变成白色,同理反之) ...
- JS各种变量是true或者false列表
如果操作数是一个对象,返回true 如果操作数是一个空字符串,返回false如果操作数是一个非空字符串,返回true如果操作数是数值0,返回false如果操作数是任意非0数值(包括Infinity), ...
- PHP-执行外部程序
备份 / 恢复数据库 exec - 执行一个外部程序(在 php 文件所在目录进行执行) 很久以前写的,很多方法是项目中的直接复制粘体用不了,只能提供下思路. 用到执行外部程序的就这一句: exec( ...
- delphi 获取文件的最新修改时间 http://www.delphitop.com/html/wenjian/64.html
delphi 获取文件的最新修改时间 作者:admin 来源:未知 日期:2010/1/28 13:15:22 人气:1054 标签: QQ空间新浪微博腾讯微博腾讯朋友QQ收藏百度空间百度贴吧更多0 ...
- Python笔记(十二)_文件
文件的打开模式 'r':以只读的方式打开文件(默认) 'w':以写入的方式打开文件,会覆盖已存在的文件 'x':用写入的方式打开文件,如果文件已存在,会抛出异常 'a':用写入的方式打开文件,如果文件 ...
- HTML表格<tr>行距调整
CSS文件中: .myTable tr{ display:block; /*将tr设置为块体元素*/ margin-bottom:5px;}
- python time 和日期相关模块
时间日期相关的模块 calendar 日历模块 time 时间模块 datetime 日期时间模块 timeit 时间检测模块 日历模块 calendar() 功能:获取指定年份的日历字符串 格式:c ...