-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy patharticle-29472.htm
208 lines (196 loc) · 15.3 KB
/
article-29472.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html xml:lang="zh-CN" lang="zh-CN">
<head>
<link rel="canonical" href="https://windowsv2ray.github.io/news/article-29472.htm" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vue刷新页面数据持久化</title>
<meta name="description" content="题记 vue项目中，多个页面之间通过路由传递数据有params和query两种传参方式，但是这两种方式在刷新页面时数据会丢失，params是直接获取不到参数，query可以获取到URL里" />
<link rel="icon" href="/assets/website/img/windowsv2ray/favicon.ico" type="image/x-icon"/>
<meta name="author" content="Windows V2ray分享订阅站">
<meta property="og:type" content="article" />
<meta property="og:url" content="https://windowsv2ray.github.io/news/article-29472.htm" />
<meta property="og:site_name" content="Windows V2ray分享订阅站" />
<meta property="og:title" content="Vue刷新页面数据持久化" />
<meta property="og:image" content="https://windowsv2ray.github.io/uploads/20240604/782d3e0d29fbdb2e7887d875be2f95d0.webp" />
<meta property="og:release_date" content="2024-12-22T11:01:36" />
<meta property="og:updated_time" content="2024-12-22T11:01:36" />
<meta property="og:description" content="题记 vue项目中，多个页面之间通过路由传递数据有params和query两种传参方式，但是这两种方式在刷新页面时数据会丢失，params是直接获取不到参数，query可以获取到URL里" />
<meta name="applicable-device" content="pc,mobile" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta name="robots" content="max-image-preview:large" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Vue刷新页面数据持久化">
<meta name="format-detection" content="telephone=no">
<link rel="dns-prefetch" href="https:/www.googletagmanager.com">
<link rel="dns-prefetch" href="https://www.googleadservices.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="https://cm.g.doubleclick.net">
<link rel="stylesheet" href="/assets/website/js/frontend/windowsv2ray/animate/animate.css">
<link rel="stylesheet" href="/assets/website/css/windowsv2ray/bootstrap.css">
<link rel="stylesheet" href="/assets/website/css/windowsv2ray/maicons.css">
<link rel="stylesheet" href="/assets/website/js/frontend/windowsv2ray/owl-carousel/css/owl.carousel.css">
<link rel="stylesheet" href="/assets/website/css/windowsv2ray/theme.css">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JN82W0GJX5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-JN82W0GJX5');
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3332997411212854"
crossorigin="anonymous"></script>
</head>
<body data-page="detail">
<!-- Back to top button -->
<div class="back-to-top"></div>
<header>
<nav class="navbar navbar-expand-lg navbar-light navbar-float">
<div class="container">
<a href="/" class="navbar-brand">
<span>Windows V2ray</span>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarContent">
<ul class="navbar-nav ml-lg-4 pt-3 pt-lg-0">
<li class="nav-item">
<a href="/" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="/free-nodes/" class="nav-link">免费节点</a>
</li>
<li class="nav-item">
<a href="/paid-subscribe/" class="nav-link">推荐机场</a>
</li>
<li class="nav-item">
<a href="/client.htm" class="nav-link">客户端</a>
</li>
<li class="nav-item">
<a href="/news/" class="nav-link">新闻资讯</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<div class="page-banner">
<div class="row justify-content-center align-items-center h-100">
<div class="col-md-10">
<h1 class="text-center">Vue刷新页面数据持久化</h1>
<nav aria-label="Breadcrumb">
<ul class="breadcrumb justify-content-center py-0 bg-transparent">
<li class="breadcrumb-item"><a href="/">首页</a></li>
<li class="breadcrumb-item"><a href="/news/">新闻资讯</a></li>
<li class="breadcrumb-item active">正文</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="page-section">
<div class="container">
<div class="row">
<div class="col-md-9">
<input type="hidden" id="share-website-info" data-name="" data-url="">
<div id="content_views" class="htmledit_views"> <h2>题记</h2> <p> vue项目中，多个页面之间通过路由传递数据有params和query两种传参方式，但是这两种方式在刷新页面时数据会丢失，params是直接获取不到参数，query可以获取到URL里的参数，但是也有一些问题存在。而vuex刷新之后数据也会丢失。</p> <h3>方法一 params传参</h3> <p> 参数不会显示在路由中，所以刷新页面时，参数是从当前页面传给当前页面，然而当前页面并没有参数传递，所以参数会丢失。</p> <h3>方法二 query传参</h3> <p> 类似GET方式传参，参数会在路由中显示，取参数是从路由中取，因为当前路由中有参数，所以刷新页面，数据不会丢失。</p> <p> 此外要注意传参为对象的情况，最好先用JSON.stringify()处理一下，接收时再用JSON.parse()转换成对象。</p> <h3>方法三 vuex + sessionstorage</h3> <p> 在页面跳转时，修改vuex中的state的值，同时sessionstorage.setItem()保存到sessionstorage中一份，下一页面需要用数据时，再用sessionstorage.getItem()获取。</p> <p> 但是这种方法不好用，存数据、取数据很麻烦，需要写大量代码，而且很容易遗漏数据的状态等。</p> <h3>方法四 vuex-persistedstate（tuijian）</h3> <p> vuex-persistedstate的原理是结合了vuex和存储方式，不需要手动每次都写存储方法</p> <pre><code>// 安装 npm install vuex-persistedstate --save</code></pre> <pre><code class="language-javascript">import Vue from 'vue' import Vuex from 'vuex' import modules from './module' import persistedState from 'vuex-persistedstate' Vue.use(Vuex) export default new Vuex.Store({ modules, plugins: [ // vuex-persistedstate默认使用localStorage来固化数据，但是有的情况需要在浏览器窗口关闭时清除数据，所以需要设为sessionStorage保存 persistedState({ storage: window.sessionStorage }) ] }) </code></pre> <p> 插件默认把所有state保存，取数据需要做一下转化，state1是state中的一个数据。</p> <pre><code class="language-javascript">JSON.parse(sessionStorage.getItem('vuex')).state1</code></pre> </p></div> <div class="clearfix"></div>
<div class="col-md-12 mt-5">
<p>上一个：<a href="/news/article-29017.htm">宠物领养中心官网网址是什么呢（宠物领养中心app）</a></p>
<p>下一个：<a href="/news/article-29473.htm">属马的适不适合养猫（属马的可以养猫吗?）</a></p>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">热门文章</h3>
</div>
<div class="panel-body">
<ul class="p-0 x-0" style="list-style: none;margin: 0;padding: 0;">
<li class="py-2"><a href="/news/article-37623.htm" title="动物疫苗接种时间表图片高清（动物疫苗接种时间表图片高清大图）">动物疫苗接种时间表图片高清（动物疫苗接种时间表图片高清大图）</a></li>
<li class="py-2"><a href="/news/article-43065.htm" title="自己在家怎么做电商没有货（自己在家怎么做电商没有货没人买怎么办啊）">自己在家怎么做电商没有货（自己在家怎么做电商没有货没人买怎么办啊）</a></li>
<li class="py-2"><a href="/news/article-22069.htm" title="瑞鹏宠物中心医院电话（瑞鹏宠物医院北站分院电话）">瑞鹏宠物中心医院电话（瑞鹏宠物医院北站分院电话）</a></li>
<li class="py-2"><a href="/news/article-31860.htm" title="沈阳免费领养宠物店（沈阳免费领养宠物店怎么样）">沈阳免费领养宠物店（沈阳免费领养宠物店怎么样）</a></li>
<li class="py-2"><a href="/free-nodes/2025-1-27-free-clash.htm" title="「1月27日」最高速度22.7M/S，2025年Shadowrocket/Clash/V2ray/SSR每天更新免费节点订阅链接">「1月27日」最高速度22.7M/S，2025年Shadowrocket/Clash/V2ray/SSR每天更新免费节点订阅链接</a></li>
<li class="py-2"><a href="/free-nodes/2024-12-10-free-clash-subscribe.htm" title="「12月10日」最高速度22.3M/S，2024年SSR/Clash/V2ray/Shadowrocket每天更新免费节点订阅链接">「12月10日」最高速度22.3M/S，2024年SSR/Clash/V2ray/Shadowrocket每天更新免费节点订阅链接</a></li>
<li class="py-2"><a href="/news/article-39114.htm" title="猫咪打的三针疫苗多少钱啊图片（猫咪打的三针疫苗多少钱啊图片大全）">猫咪打的三针疫苗多少钱啊图片（猫咪打的三针疫苗多少钱啊图片大全）</a></li>
<li class="py-2"><a href="/free-nodes/2025-1-25-node-share.htm" title="「1月25日」最高速度19.3M/S，2025年Clash/V2ray/Shadowrocket/SSR每天更新免费节点订阅链接">「1月25日」最高速度19.3M/S，2025年Clash/V2ray/Shadowrocket/SSR每天更新免费节点订阅链接</a></li>
<li class="py-2"><a href="/news/article-43559.htm" title="Firefox中的HTML5输入类型“数字”">Firefox中的HTML5输入类型“数字”</a></li>
<li class="py-2"><a href="/news/article-47516.htm" title="Go1.18 新特性之多模块Multi-Module工作区模式_Golang">Go1.18 新特性之多模块Multi-Module工作区模式_Golang</a></li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">归纳</h3>
</div>
<div class="panel-body">
<ul class="p-0 x-0" style="list-style: none;margin: 0;padding: 0;">
<li class="py-2">
<h4><span class="badge" style="float: right;">6</span> <a href="/date/2025-03/" title="2025-03 归档">2025-03</a></h4>
</li>
<li class="py-2">
<h4><span class="badge" style="float: right;">84</span> <a href="/date/2025-02/" title="2025-02 归档">2025-02</a></h4>
</li>
<li class="py-2">
<h4><span class="badge" style="float: right;">92</span> <a href="/date/2025-01/" title="2025-01 归档">2025-01</a></h4>
</li>
<li class="py-2">
<h4><span class="badge" style="float: right;">87</span> <a href="/date/2024-12/" title="2024-12 归档">2024-12</a></h4>
</li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- .container -->
</div> <!-- .page-section -->
</main>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-sm-6 py-2">
<p id="copyright">
<p>
<a href="/">首页</a> |
<a href="/free-node/">免费节点</a> |
<a href="/news/">新闻资讯</a> |
<a href="/about-us.htm">关于我们</a> |
<a href="/disclaimer.htm">免责申明</a> |
<a href="/privacy.htm">隐私申明</a> |
<a href="/sitemap.xml">网站地图</a>
</p>
Windows V2ray分享订阅站 版权所有 Powered by WordPress
</p>
</div>
<div class="col-sm-6 py-2 text-right">
<div class="d-inline-block px-3">
<a href="#">Privacy</a>
</div>
<div class="d-inline-block px-3">
<a href="#">Contact Us</a>
</div>
</div>
</div>
</div> <!-- .container -->
</footer> <!-- .page-footer -->
<script src="/assets/website/js/frontend/windowsv2ray/jquery-3.5.1.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/bootstrap.bundle.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/wow/wow.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/owl-carousel/js/owl.carousel.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/waypoints/jquery.waypoints.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/animateNumber/jquery.animateNumber.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/theme.js"></script>
<script src="https://www.freeclashnode.com/assets/js/frontend/invite-url.js"></script>
<script src="/assets/website/js/frontend/G.js"></script>
</body>
</html>