1、vue单页面回退丢失参数的问题
可能有些跟我同样的新手同窗会遇到一个问题,就是好比我从商品详情跳转到购物车,没问题,可是,购物车页面中点击浏览器的回退按钮,返回到detail页面时,你的动态数据(图片啊,名称啊,价格啊什么的)不见了,只剩下一堆css样式架子在那里,很难受。
这就是单页面回退参数丢失的问题,话很少说,直接说解决方法。
一、首先,咱们须要了解一下Vuex。(状态管理)具体你们百度vuexphp
在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
而后,解决完毕!嘻嘻嘻css
2、webpack打包工程上线后,你发现开发者工具的source看到了源码
对,webpack上线配置错了。去到config文件夹下的index.js,里面有个build的内容,把其中的productionSourceMap改为falsehtml
3、凡是修改了项目的配置,都要从新npm run dev 哟,由于热重载通常是自动更新修改的页面vue
4、vue的Post请求到后台语言(php,java,asp啥的),发现post不出去,不报错又没效果
解决方案:加上{emulateJSON: true}。例如:java
this.$http.post("url", { //参数 },{emulateJSON: true}).then(function(res) { //suc });
5、发现webpack打包后,页面是空的
可能你的路由mode是history,要改为hash,通常默认是hash。webpack
。。。就大概说这些吧,想不起来了。。。我只是个初学者。。。web
最后link一下算是带我入门的导师,慕课网的河畔一角,看了他的视频,讲的很棒
https://coding.imooc.com/clas...vuex
还有个人项目,你们喜欢的话,能够找我要源码,同时跪求!跪求!有大神能够指点我一会儿!
http://111.230.91.125:3000/#/
http://111.230.91.125:8080/Vshop/view/index.htmlvue-cli
若是你以为文章不错的话,点个小赞呗,谢谢谢谢,嘻嘻嘻!npm