【vue项目 刷新一下之后 内容消失？】+ 用 route 传递数据

具体的原因 还是 看看https://www.cnblogs.com/attacking-cabbage/p/10846211.html

这个问题的原因是因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了

可以用local storage 但是 性能不太好  所以 可以用文中方法  也可以下面 因为是跳转到了新的界面之后数据消失了  所以  传进去的路由不要传vuex里面的

 

要刨根问底呀~ 不然不会进步

子组件这样
不过就是解析的时候有点难看
this.details = JSON.parse(this.$route.query.details);

外面推的时候
this.$router.push({ name: 'screen',query:{details: JSON.stringify(this.details)} })

local storage不好
是路由传的时候没传进去？我的天啊 这我怎么能想的到 
先是传递进去的时候 param改成了 query
然后  具体的detail是哪里赋值的？看了一下，原来是在外面赋值 然后存到detail里面去， 里面刷新 外面的就没了（大概是这个意思）
然后 就把detail保存一下 直接传进子组件里面去 不依赖于vuex的全局变量（刷新的时候会重新创建实例）
后来发现这个vuex的问题，除了detail之外 其他的用户名什么的也会一起出问题。于是我~ 一起改了改
因为太多，而且怕roles直接全局替换不太好？emmm然后反正就 
 this.roles=this.$store.state.user.roles;
        //console.log("百试百灵bug消除",this.roles);
        this.$router.push({ name: 'contractDetail', query: { compo: compo,details: JSON.stringify(this.details), roles: JSON.stringify(this.roles)}});

this.$store.state.user.roles = JSON.parse(this.$route.query.roles);

_(:з」∠)_ _(:з」∠)__(:з」∠)_
关键是这个gg的还有两个地方跳转，经常搞混。（吐槽一下自己找到一堆bug  测试啥都看不出来 跟他说了也只知道端口和发数据。。。你行你来啊）

=====================================================
然后有一个可以说是极其重大的发现，就是如果js错误的话，火狐没报，也可能我不会看？（谷歌的开发者界面难用得都不能用。。还是火狐吧）页面还是好的，继续跑，所以你会发现没有console.log
只是因为里面错了 
只是因为里面错了 
不是因为create没有被调用  哈哈哈哈 
今天改这个的时候  其实其实完全只是因为role没定义  不是传不进来 
反正到处console看一下嘛  前后数据都有的 恍然若悟
还是用那个分段法  把我这句百试百灵到处摆上 然后定位跑到哪里的时候不动了/
一般create里面这样解决完全足够~
前端还是很有意思的哈哈哈哈   wish u enjoy it
=====================================================

对了 最后 每次喝酸奶的时候 我都感觉人生价值得到了升华

==========================================================传递数据

https://blog.csdn.net/shenxianhui1995/article/details/86580470

3. 通过 query 传递

    // 带查询参数，变成 /register?plan=private
    router.push({ path: 'register', query: { name: 'sxh' }});

注: query 传参是针对 path 的

这种接收参数的方式是

this.$route.query.name
 

其他方法

1. 通过 path 传递

    this.$router.push({path:`/user/${userId}`});
    // this.$router.push(`/user/${userId}`);

注: 这样传递参数的话, 配置路由的时候需要在 path 上加参数: path: 'user/:userId'

这种接收参数的方式是

this.$route.params.userId

2. 通过 params 传递

    // 命名的路由
    router.push({ name: 'user', params: { userId: 123 }});

注: params 传参是针对 name 的

这种接收参数的方式是

this.$route.params.userId