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。